移动设备加载页面放大

Question

我目前正在从事一个网站项目，总体上一切正常。但是由于某种原因，当我在移动设备（例如galaxy s5或iphone 5）上运行网站时，浏览器会在左上角放大。我尝试通过使用

禁用缩放

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

但是它仅固定导航栏，其余部分保持放大状态。 这是我当前的meta标签：

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

我已将页面正文的CSS设置为body {position: relative;}，并且

@media screen and (max-width: 700px) {body {position: absolute;}}

适用于宽度小于700像素的设备（因为这可以解决“机身无法填满整个移动设备宽度”的问题）。

我还将导航栏的CSS设置为“ position：fixed;”。

可以访问我的网站here。关于如何在加载时阻止移动设备缩放网页的任何想法？谢谢。

Answer 1

您将“ .homeintrocontainer .homeintrohead”的字体大小设置为80px，并且没有减小移动设备的字体大小。您可以缩小字体大小并检查吗？或者，如果您需要相同的字体大小，请尝试将word-break：break-all添加到.homeintrocontainer .homeintrohead类。

.homeintrocontainer .homeintrohead {
text-align: center;
padding-bottom: 15px;
font-size: 30px; /*for reference just edited the font size*/
padding-top: 200px;
padding-bottom: 30px;
margin: 0 auto;
word-break: break-all;

}