css - 移动设备加载页面放大

Question

我目前正在做一个网站元素，总体上一切顺利。但出于某种原因，当我在移动设备(例如 galaxy s5 或 iphone 5)上运行我的网站时，浏览器会在左上角放大。我试图通过使用禁用缩放

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

但它只修复了导航栏， body 的其余部分保持放大。这是我当前的元标记:

<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;