个人中心
gpt4 book ai didi

html - 为什么这些不能在移动浏览器上正确缩放？

转载 作者：太空宇宙 更新时间：2023-11-04 13:21:01 26 4
gpt4 key购买 nike

这是我网站的链接。您将能够从那里查看我所有的代码，但我认为下面的代码是导致我的问题的原因。 dustindowell.com/blog

我正在使用移动浏览器上的响应式网站的媒体查询设计此网站，但我无法弄清楚这一点。它在桌面浏览器上运行良好，但当我使用 Opera、Firefox 或 Chrome 进入手机时，查看“侧边栏”(主要内容帖子下的 aside class="sidePost"，带有气泡图像和我的twitter 用户名)它不会像其他内容那样扩展。

我不知道为什么。我用 em 设计了整个网站，看不到任何像素单位。这不是 aside 的问题，因为我已经尝试将它切换到 div，而且我在页面上还有另一个可以完美缩放的 aside。我真的没主意了。

编辑:只是想补充一点，页脚也没有缩放。 我唯一能想到的是谷歌字体会以某种方式影响缩放？我在页面的其他地方有谷歌字体，但它们似乎没有受到影响。

编辑:还有一件事。我正在谈论的文本应该都是明显相同的大小。即使我在 postSidebar 或页脚上设置 font-size:200%，它们仍然无法缩放。

编辑:排除了导致问题的谷歌字体。

编辑:除了 calc 属性在 Android 浏览器上不受支持外，它似乎在那里工作得很好。

编辑:我一直在努力解决这个问题，但我所做的一切似乎都无济于事。导致它无法缩放的并不是页脚或旁边的事实。这不是 It 在段落标记中的事实。它不是在#contentContainer 内部，而是在#content div 外部。我完全迷失了，我几乎确信浏览器以某种方式决定了我的内容是什么，这是唯一应该放大供用户阅读的东西，而且只有几个字长，不值得花时间遵循我为所有文本设置的规则。

我还更新了这个问题并添加了更多代码。

编辑:我知道我正在以这种方式进行编辑。但我有另一个更新。如果我缩放文本 font-size:500%;该站点按比例是正确的，尽管它大了 500 倍。仍然不知道为什么这个比例不对，这让我发疯。

HTML:

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dustin Dowell</title>

<link href='http://fonts.googleapis.com/css?family=Contrail+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>

<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<link href="css/faces.css" rel="stylesheet" type="text/css">
<link href="glider/featuredcontentglider.css" rel="stylesheet" type="text/css">

<!-- Media Query needs precedence over all stylesheets -->
<link href="css/mediaQuery.css" rel="stylesheet" type="text/css">
<link href="css/mediaQueryMobile.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="glider/featuredcontentglider.js">
// /***********************************************
// * Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
// * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
// * This notice must stay intact for legal use
// ***********************************************/
</script>

<!--
=================================================================
    This site was created by Dustin Dowell, Copyright 2013
    Do not copy, modify, or redistribute this design.
=================================================================
-->

</head>
<body>

<div id="displayPercentage">
    <ul>
        <li>Current Page Scaling: 75% <a href="">What is this?</a></li>
        <li>Current Page Scaling: 100% <a href="">What is this?</a></li>
        <li>Current Page Scaling: 125% <a href="">What is this?</a></li>
        <li>Current Page Scaling: 150% <a href="">What is this?</a></li>
        <li>Current Page Scaling: 175% <a href="">What is this?</a></li>
        <li>Current Page Scaling: 200% <a href="">What is this?</a></li>
    </ul>
</div>

<header>
    <div id="headerContent">

        <div id="logo"></div>

        <div id="headline">
            <h1 id="title">Life of Geek</h1>
            <h2 id="tagline">Energy Drinks and Microwavable Food</h2>
        </div>

        <nav>
            <a class="current" href="">News</a>
            <a href="">Apps</a>
            <a href="">Galleries</a>
            <a href="">Cool Stuff</a>
        </nav>

        <div class="Clear"></div>

    </div>
</header>

<div id="pageContainer">
    <div id="slideShowContainer">
        <script type="text/javascript">
            featuredcontentglider.init({
                gliderid: "glideContainer", //ID of main glider container
                contentclass: "glideContent", //Shared CSS class name of each glider content
                togglerid: "glideSelect", //ID of toggler container
                remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
                selected: 0, //Default selected content index (0=1st)
                persiststate: false, //Remember last content shown within browser session (true/false)?
                speed: 750, //Glide animation duration (in milliseconds)
                direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
                autorotate: true, //Auto rotate contents (true/false)?
                autorotateconfig: [6000, 200], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
                onChange: function(previndex, curindex, $allcontents){ // fires when Glider changes slides
                    //custom code here
                }
            })
        </script>

        <div id="glideSelect" class="glideContentToggler">
            <a href="#" class="prev" id="togglerLeft"></a>
            <a href="#" class="next" id="togglerRight"></a>
            <div class="clear"></div>
        </div>

        <div id="glideContainer" class="glideContentWrapper">
            <div class="glideContent">
                <img src="images/glider/slide1.png" alt="">
            </div>

            <div class="glideContent">
                <img src="images/glider/slide1.png" alt="">
            </div>

            <div class="glideContent">
                <img src="images/glider/slide1.png" alt="">
            </div>
        </div>

    </div>

    <div id="contentContainer">

        <section id="content">
            <article class="post">
                <h1>The title of this blog post.</h1>
                <h2>Posted June 28, 2013</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad m i n im veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in v oluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad m i n im veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in v oluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </article>
            <aside class="postSidebar">
                <div class="authorImage">
                    <div class="dustinFace">
                        <div class="bubble"></div>
                    </div>
                </div>
                <div class="postSidebarText">
                    <p>Dustin Dowell</p>
                    <p>@dustindowell22</p>
                </div>
                <div class="clear"></div>
            </aside>
            <div class="clear"></div>

            <article class="post">
                <h1>The title of this blog post.</h1>
                <h2>Posted June 28, 2013</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </article>
            <aside class="postSidebar">
                <div class="authorImage">
                    <div class="dustinFace">
                        <div class="bubble"></div>
                    </div>
                </div>
                <div class="postSidebarText">
                    <p>Dustin Dowell</p>
                    <p>@dustindowell22</p>
                </div>
                <div class="clear"></div>
            </aside>
            <div class="clear"></div>

        </section>

        <aside id="sidebar">
            <article class="sidePost">
                <h1>Sidebar Title</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </article>
        </aside>

        <div class="clear"></div>

        <footer>
            <p>Copyright &copy; 2013 Dustin Dowell</p>
        </footer>
    </div>

</div>

</body>
</html>

移动媒体查询 CSS:

    @charset "UTF-8";
/* CSS Document */

/* ////////// Mobile Resolution ////////// */
/* 50px negative gap for good measure */

/* Portrain CSS */
@media only screen
and (orientation: portrait)
{
    body{
        min-width:48em; /* 768px */
        font-size:125%;
    }

    #displayPercentage{
        display:none;
    }

    /* Header */
    header{
        height:12em;
    }

    #headerContent{
        width:inherit;
    }

    #headline{
        font-size:75%;
        margin-left:21.5em;
    }

    nav{
        float:right;
    }

    /* Page */
    #pageContainer{
        width:100%;
    }

    /* SlideShow */
    #slideShowContainer{ /* to complicated to fit in design accurately, also can run slow on some phones */
        display:none;
    }

    /* Content */
    #contentContainer{
        width:calc(100% - 3em);
        padding-top:1.5em; /* cancels out padding, padding should be applied to content and sidebar elments instead */
    }

    #content{
        width:100%;
        margin-right:0;
    }

    /* Post */
    .post{
        width:100%;
    }


    /* Post Sidebar */
    .postSidebar{
        width:100%;
        margin-bottom:1.5em;
    }

    .authorImage{
        font-size:50%;
        float:left;
        margin:0;
    }

    .postSidebarText{
        margin-top:1em;
        margin-left:6em;
    }

    .postSidebar p{
        text-align:left;
    }

    /* Sidebar */
    #sidebar{
        width:100%;
        margin-bottom:1.5em;
    }

    .sidePost{
        width:100%;
        margin:0;
    }

    /* Footer */
    footer{
        width:100%; /* redundant */
    }
}

常规样式表 CSS:

    @charset "UTF-8";
/* CSS Document */

*{
    margin:0;
    padding:0;
}

body{
    min-width:70em; /* largest width to prevent horizontal scrolling */

    font-size:100%; /* keep in divisors of 25 or rounding will cause breaks, but never below 75% or webkit will break */
    line-height:1.5em; /* line height for the entire page */
    font-family: 'Crimson Text', serif;

    background-image:url(../images/layout/bg.png);
    background-size:.5em; /* 8 instead of 16 so it doesn't look blurry on retina */
}

.clear{
    clear:both;
}

#displayPercentage{
    height:1.5em;

    margin-left:.25em;

    position:absolute;
    top:0;

    overflow:hidden;

    font-weight:normal;
    font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
    color:rgba(191,191,191,1);
}

#displayPercentage a{
    margin-left:1em;
}

/* ////////// Links ////////// */
a:link{
    color:rgba(128,204,255,1);
    text-decoration:none;
}

a:visited{
    color:rgba(128,204,255,1);
}

a:hover{
    color:rgba(128,204,255,1);
    text-decoration:underline;
}

a:active{
    color:rgba(128,204,255,1);
}

/* ////////// Header ////////// */
header{
    height:12em;

    margin-top:3em; /* margin at top of page */

    background-image:-webkit-linear-gradient(rgba(51,51,51,1), rgba(26,26,26,1));
    background-image:   -moz-linear-gradient(rgba(51,51,51,1), rgba(26,26,26,1));
    background-image:     -o-linear-gradient(rgba(51,51,51,1), rgba(26,26,26,1));
    background-image:        linear-gradient(rgba(51,51,51,1), rgba(26,26,26,1));
}

#headerContent{
    width:64em; /* width of the content in the header so it can be centered */
    margin:auto;
}

#logo{
    width:15em; /* 240px */
    height:15em; /* 240px */

    margin-top:-1.5em; /* for overhang */
    border-radius:15em;

    position:absolute; /* prevents interference because of overhang */
    z-index:2000;

    background-image:url(../images/logo.svg);
    background-size:contain;
}

#headline{
    white-space:nowrap; /* prevents word wrap on small window sizes */
    margin-left:16.25em; /* this is just what looks decent. no math here */
    margin-top:3.25em; /* this is just what looks decent. no math here */

    position:absolute; /* prevents messing with nav bar float right */
}

#title{ /* keep title short or it will break the design */
    line-height:.8em; /* i don't know why this number works perfectly */

    font-size:6em;
    font-weight:normal;
    font-family: 'Contrail One', sans-serif;
    color:rgba(255,255,255,1);

}

#tagline{
    line-height:1.5em;

    font-size:1.5em;
    font-weight:normal;
    font-family: 'Contrail One', sans-serif;
    color:rgba(255,255,255,1);

    text-indent:.0625em;
}

/* ////////// Navigation ////////// */
nav{
    height:3em;

    margin-top:9em;
    margin-right:1.5em;

    float:right;

    font-weight:normal;
    font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
}

nav a{
    display:block;
    height:.8em; /* 1 / 1.25 */ /* prevents border from acting stupid */

    margin-left:.8em;/* for spacing between links */ /* 1 / 1.25 */
    padding-bottom:1.44em; /* 1.8 / 1.25 */
    border-bottom:.16em solid rgba(0,0,0,0); /* .2 / 1.25 */

    float:left;

    font-size:1.25em; /* has to be defined here to prevent wonky changes elsewhere */

    text-transform:uppercase;
    text-decoration:none;
}

nav a.current{ /* a class applied to the link of the current page */
    border-color:rgba(255,255,255,1);
}

nav a:link{
    color:rgba(255,255,255,1);
    text-decoration:none; /* cancles out normal link style */
}

nav a:visited{
    color:rgba(255,255,255,1);
}

nav a:hover{
    color:rgba(128,204,255,1);
    border-color:rgba(128,204,255,1);
}

nav a:active{
    color:rgba(128,204,255,1);
}

/* ////////// Page ////////// */
#pageContainer{
    width:64em;
    margin:auto;
}

/* ////////// Content ////////// */
#contentContainer{
    width:61em;

    padding:1.5em;

    background-color:rgba(255,255,255,1);
    box-shadow:inset 0 -1px 0 1px rgba(0,0,0,.1);
}

#content{
    width:43.5em;
    margin-right:1.5em;
    float:left;
}

/* ////////// Post ////////// */
.post{
    width:32em;
    margin-bottom:1.5em;
    float:right;
}

.post h1{
    font-size:2em;
    font-weight:normal;
    font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
}

.post h2{
    margin-left:0.125em; /* for aligning with title better */
    font-size:1em;
    font-weight:normal;
    font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
    color:rgba(191,191,191,1); /* gray */
}

.post h3, .post h4, .post h5, .post h6{
    font-size:1em;
    font-weight:normal;
    font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
    color:rgba(191,191,191,1); /* gray */
}

.post p{
    text-indent:1em;
}

/* ////////// Post Sidebar ////////// */
.postSidebar{
    width:10em;
    float:left;

    font-weight:normal;
    font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
}

.postSidebar p{
    text-align:center;
    color:rgba(191,191,191,1);
}

/* ////////// Sidebar ////////// */
#sidebar{
    float:right;
    width:16em;
}

.sidePost{
    margin-bottom:1.5em;
}

.sidePost h1, .sidePost h2, .sidePost h3, .sidePost h4, .sidePost h5, .sidePost h6{
    font-size:1em;
    font-weight:normal;
    font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
}

.sidePost p{
    text-indent:1em;
}

/* ////////// Footer ////////// */
footer p{
    font-weight:normal;
    font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;

    text-align:center;
}

最佳答案

关于html - 为什么这些不能在移动浏览器上正确缩放？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17637219/

26 4 0
文章推荐： python - boost.mpi.world Communicator 与 C++ 签名不匹配:boost::mpi::communicator
文章推荐： css - 移动优化 - 根据屏幕大小有条件地加载 HTML
文章推荐： java - Java 中的分支和循环(break 和 continue)
文章推荐： html - 选择框在浏览器中不显示相似
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com