iPhone 以更高的屏幕分辨率显示 "mobile"网站

Question

我目前正在开发一个网站的“移动版本”，该网站主要针对最新的 iPhone (4+)，这是我第一次这样做。我在 iPhone 4S 上进行测试，我的理解是该设备的屏幕分辨率为 640x920(当处于“纵向”方向时)。我在一个 600 像素宽的容器中拥有网站上的所有内容，尽管当我在手机上查看它时，它似乎默认显示为“缩小”状态，因为我仍然可以在屏幕上看到大约 1000-1200 像素的内容屏幕。

我假设 iPhone 以这种方式显示网站，因为许多网站不是为了适应它的较小分辨率而构建的？我在这里缺少什么吗？我是否设置了一些东西来告诉设备以实际分辨率显示网站？

Answer 1

您需要在 html head 中添加视口(viewport)元标记。

<meta name="viewport" content="width=device-width">

告诉浏览器视口(viewport)(虚拟宽度)应该设置为设备宽度(物理宽度)。