移动设备加载页面放大

Question

我目前正在开展一个网站项目，整体情况还不错。但出于某种原因，当我在移动设备上运行我的网站时，例如galaxy s5或iphone 5，浏览器会放大左上角。我试图通过使用禁用缩放

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

但它只修复了导航栏，身体的其他部分保持放大。这是我目前的元标记：

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

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

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

对于小于700px宽的设备（因为它修复了'正文未填满整个移动设备宽度'的问题）。

我还将导航栏的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;

}