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

【问题标题】：Webpage has inconsistent text size on mobile网页在移动设备上的文字大小不一致
【发布时间】：2016-06-15 15:01:07
【问题描述】：

我正在尝试为作业制作一个简单的网页，该网页应根据屏幕尺寸具有 3 种不同的布局。 Here 的任务。在桌面上一切正常 - 布局如我所料，并随着我改变浏览器窗口的宽度而改变。你可以自己试试here。

然而，在移动设备上，有一个奇怪的问题。其中一个文本框的大小比其他文本框大，我不知道为什么。

这是 Chrome 在桌面上的外观：

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

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

这是 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。

关于为什么该网站在移动设备上看起来如此不同的任何指针？我认为禁用缩放等的元标记就足够了，但显然还不够。

【问题讨论】：

在桌面视图中，我可以在一行中看到 3 列，蓝色框更大，因为它的行数比其他行多。我还看不到任何其他问题。
问题是你提到的。您不指定字体大小。尝试这样做，它应该为您解决。请记住，所有浏览器都有一些元素的默认值。

标签： html css responsive-design

【解决方案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="">

【讨论】：