移动设备加载页面放大
Mobile devices loads page zoomed in
我目前正在做一个网站项目，总体上一切顺利。但出于某种原因，当我 运行 我的网站在移动设备上时，例如 galaxy s5 或 iphone 5，浏览器会在左上角放大。我试图通过使用
来禁用缩放
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
但它只修复了导航栏，body 的其余部分保持不变 zoomed-in。
这是我当前的元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我已将我页面 body 的 CSS 设置为 body {position: relative;}，以及
@media screen and (max-width: 700px) {body {position: absolute;}}
适用于宽度小于 700 像素的设备（因为这解决了 'body not filling up the entire mobile device width' 问题）。
我还将导航栏的 CSS 设置为 'position: fixed;'。
可以访问我的网站here。关于如何阻止移动设备在加载时缩放我的网页的任何想法？谢谢。
您将“.homeintrocontainer .homeintrohead”的字体大小设置为 80px，并且没有减小移动设备的字体大小。你能减少这个字体大小并检查吗？或者，如果您需要相同的字体大小，请尝试将 word-break:break-all 添加到 .homeintrocontainer .homeintrohead class.
.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;
}
我目前正在做一个网站项目，总体上一切顺利。但出于某种原因，当我 运行 我的网站在移动设备上时，例如 galaxy s5 或 iphone 5，浏览器会在左上角放大。我试图通过使用
来禁用缩放<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
但它只修复了导航栏，body 的其余部分保持不变 zoomed-in。 这是我当前的元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我已将我页面 body 的 CSS 设置为 body {position: relative;}，以及
@media screen and (max-width: 700px) {body {position: absolute;}}
适用于宽度小于 700 像素的设备（因为这解决了 'body not filling up the entire mobile device width' 问题）。
我还将导航栏的 CSS 设置为 'position: fixed;'。
可以访问我的网站here。关于如何阻止移动设备在加载时缩放我的网页的任何想法？谢谢。
您将“.homeintrocontainer .homeintrohead”的字体大小设置为 80px，并且没有减小移动设备的字体大小。你能减少这个字体大小并检查吗？或者，如果您需要相同的字体大小，请尝试将 word-break:break-all 添加到 .homeintrocontainer .homeintrohead class.
.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;
}