为什么移动浏览器加载我的页面时会完全放大？答案

【问题标题】：Why do mobile browsers load my page completely zoomed-in?为什么移动浏览器加载我的页面时会完全放大？
【发布时间】：2012-06-01 04:27:28
【问题描述】：

我目前正在为客户开发一个网站（仍在进行中）并尝试解决该网站上的一些移动问题。

我遇到的主要问题是移动浏览器（android + iphone）在网站的左上角完全放大了加载网站。无论视口的宽度如何，我都希望将其缩小以适应视口中的整个网站宽度。

该网站可以在这里查看：http://www.graceprep.com

有没有简单的解决方法？我在 HTML/CSS 方面经验丰富，但在移动浏览器方面我有点新手。

这是我的 header.php 文件中可能相关的一些 HTML。我尝试更改宽度属性无济于事。 initial-scale 属性有效，但过于宽泛 - 我希望网站针对所有移动浏览器完全缩小，无论方向或屏幕尺寸如何。

有没有办法做到这一点？

【问题讨论】：

【解决方案1】：

为什么你有那个元标记？如果您完全删除它，设备将自动决定缩放级别。

【讨论】：

【解决方案2】：

我几乎是肯定的

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

应该可以解决这个问题。您可以将“宽度”设置为您想要的任何值，但通过将其设置为设备宽度，它将调整为任何设备的像素宽度值。 “initial-scale”控制指定宽度的缩放级别。

【讨论】：

【解决方案3】：

似乎大多数移动浏览器倾向于传达一个默认视口宽度，该宽度比移动设备的宽度要宽得多。例如，iOS Safari 假定网页为 980px 宽，并缩小以适应可用的 iPhone 4 320px(https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972) 中的全部内容。 Android 浏览器倾向于适应 800 到 1024 CSS 像素之间的宽度 (https://developers.google.com/speed/docs/insights/ConfigureViewport)。

预期的宽度似乎在元标记实现之前以某种方式传达，因此在某些情况下将宽度设置为设备的宽度似乎被视为放大。除非您页面上的 css 使用媒体查询来适应设备的实际宽度，否则我认为最好避免错过值的 'width=device-width' 部分，而只需设置您设置的其他约束'在追求。

【讨论】：