Question

我试图根据屏幕尺寸为一个应该有3种不同布局的作业创建一个简单的网页。 Here是作业。桌面上的一切都很好 - 布局就像我期望的那样，并随着我改变浏览器窗口的宽度而改变。您可以自己尝试here。

然而，在移动设备上，这是一个奇怪的问题。其中一个文本框的大小比其他文本框大，我无法弄清楚原因。

以下是Chrome中桌面的外观：

这正是我想要它的样子。但这是移动视图，使用chrome dev工具中的设备模拟器：

正如你所看到的，蓝色框中的文字比其他两个文本大，我不知道为什么，因为我根本没有弄乱字体大小。

这是HTML：

<!DOCTYPE html>
<html>
<head>
    <title>The Best Colors</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;
</head>
<body>
<h1>The Best Colors</h1>
<div id="container">
<div id="yellow">
    <h2>Yellow</h2>
    <p>Yellow is the best of the best. It is the color of a brightness, of a sunny day after the winter, of sunflowers and fresh lemons. It brings to mind warmth and happiness and cheerfulness. It is the color of optimism and positivity. Yellow is also the title of a very relaxing Coldplay song. </p>  
</div>
<div id="green">
    <h2>Green</h2>
    <p>Green is the color of nature. It brings to mind forests full of life, fields full of bounty. It is the color of spring and youth. Green also symbolises fertility and good health, though also envy. Green is also the color associated with life, since most terran vegeation is green. It's a pretty good color overall.</p>

</div>
<div id="blue">
<h2>Blue</h2>
<p>Ah, blue. Blue is the color of the infinite. The skies above and the seas below, limitless and full of possibilities and wonders, are both blue. It also has a lot of energy, being on of the higher frequency colors. It is also associated with masculinity and boys, the counterpoint to the classic pink, though this association has been getting less popular. </p>

</div>

</div>
</body>
</html>

CSS：

div{
    margin: 0.5%;
    box-sizing: border-box;
}

body{
    background-color: #C0C0C0;
}

div#yellow, div#green, div#blue{
    border: 2px solid black;
}

h1{
    font-size: 250%;
    font-family: times;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    width: 100%;
}

h2{
    float: right;
    width: 25%;
    text-align: center;
    font-weight: bold;
    margin: 0px;
    border-top: 0;
    border-right: 0;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
}

p{
    clear: both;
    padding: 10px;
    text-align: justify;
    font-family: serif;
}


div#yellow{
    color: red;
    background-color: yellow;
}

div#green{
    color: black;
    background-color: green;
}

div#blue{
    color: white;
    background-color: blue;
}

div#yellow > h2{
    color: yellow;
    background-color: red;
}

div#green > h2{
    color: green;
    background-color: black;
}

div#blue > h2{
    color: blue;
    background-color: white
}

@media (max-width: 767px){
        div#container{
        position: relative;
        overflow: hidden;
    }

    div#yellow, div#green, div#blue{
        float: left;
        clear: both;
    }
}

@media (min-width: 768px) and (max-width: 991px){
    div#container{
        position: relative;
        overflow: hidden;
    }

    div#yellow, div#green{
        float: left;
        width: 49%;
    }
    div#blue{
        clear: both;
        width: 99%;
    }
}

@media (min-width: 992px){

    div#container{
        position: relative;
        overflow: hidden;
    }

    div#yellow, div#green, div#blue{
        float: left;
        width: 31%;
    }
}

我刚刚意识到上面的图像有667宽度，应该使用单列布局，因为在CSS中我的截止值是767px。

有关网站在移动设备上看起来如此不同的原因的任何指示？我认为禁用变焦等的元标记应该足够了，但显然它还不够。

Answer 1

您的元标记未正确实施且未关闭。替换为此元标记以下是您的回答：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在你的代码中：这是错误的

<meta name="”viewport”" content="”width=device-width;" initial-scale="1.0;" maximum-scale="1.0;" user-scalable="no;" <="" head="">

网页在移动设备上的文字大小不一致

1 个答案: