网站宽度不能自动适应iPhone屏幕

Question

我希望我的网站能够自动适应iPhone竖屏的屏幕大小（在iPhone 5上测试）。目前我的宽度CSS设置为100％，并且正在使用以下meta viewport标签：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />

这个技巧是从这个问题中推荐的：网站无法自动适应iPhone屏幕 然而，对我来说并没有用。网站宽度仍然比iPhone竖屏屏幕宽得多。

如何让网站宽度自动适应iPhone竖屏屏幕？

- Tim Jahn

---

你有一个托管的示例吗？它是以什么方式太宽了？是缩小了还是内容超出了视口？ - Austin Pray

不好意思，这是一个受保护的客户端网站。看起来实际上是页眉图像导致它太宽了。我正在尝试确定是否可以使其适应iPhone屏幕宽度。 - Tim Jahn

Answer 1

确保视口已正确配置：

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

确保您的内容不要超出视口宽度。

例如，如果您有一张比视口更宽的图片，请将CSS设置为

max-width:100%;

- Austin Pray

---

我把这个添加到引起问题的页眉图像中，然后问题得到解决了。谢谢！ - Tim Jahn

Answer 2

我认为你可能只是稍微有一点偏差。这是对我有效的方法。

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

- Four_lo

---

不行，这对我也没用。:( 网站仍然太宽了。几乎是 iPhone 5 竖屏宽度的2.5倍。 - Tim Jahn