logo标签列表

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

htmlmobilemedia-queriesscale
3

这是我的站点链接。您可以从那里查看我所有的代码，但是我认为下面的代码引起了问题。 dustindowell.com/blog

我正在使用媒体查询为响应式站点设计该站点，但我无法解决问题。在桌面浏览器上运行良好，但是当我使用Opera，Firefox或Chrome上的手机浏览器并查看“侧边栏”（位于气泡图像和我的Twitter用户名下主要内容后的aside class="sidePost"），它不会像其他内容一样缩放。

我不知道为什么。我使用ems设计了整个站点，并且没有像素单位可见。这不是aside的问题，因为我已经尝试将其切换到div，并且页面上还有另一个aside，其缩放非常正常。我真的没有想法。

编辑：只想补充一下，页脚也不会缩放。我唯一能想到的是Google字体在某种程度上影响了缩放? 我在页面其他位置使用了Google字体，但似乎没有受到影响。

编辑：还有一件事。我所说的文本应该都具有相同的可见大小。即使我在postSidebar或footer上设置了font-size:200%，它们仍然不会缩放。

编辑：排除了Google字体引起的问题。

编辑：除了Android浏览器不支持calc属性之外，它似乎在那里完全正常。

编辑：我一直努力解决这个问题，但是我所做的一切似乎都没有任何影响。不是因为它是页脚或aside导致其无法缩放。不是因为它在段落标记内。也不是因为它在#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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接