【发布时间】：2014-10-19 17:14:05
【问题描述】：
目标是在 iPhone 上显示完全缩小的无响应网站。换句话说，该网站最初应该适合 iPhone 屏幕而不需要水平滚动，然后用户可以通过捏合来放大。
通常，我不需要视口元标记。当没有视口元标记时，网站将自动缩小以适应移动屏幕，无需水平滚动。
但当网站的宽度超过 ~1000 像素时则不然！当它变宽时，只有第一个 ~1000px 水平适合并出现水平滚动。
只有 iPhone 有这种行为。在 Android 上没问题。
我尝试使用相应的元标记强制视口，发现 iPhone 仅在元标记的值低于 ~1000 时才尊重它。
E. G。如果我设置...
<meta name="viewport" content="width=500;">
...网站放大到 500 像素。如果我设置width=900，网站会放大到900px。
但是当我将它设置为...
<meta name="viewport" content="width=1400;">
...然后网站显示宽度为 1000 左右。
同样，Android 正确地尊重任何宽度。
问题是：如何将 1400 像素宽的网站放入 iPhone 屏幕，以便在最初加载时没有水平滚动，直到用户捏合放大？
这里有一个演示：http://jsbin.com/luqari/edit
【问题讨论】：
标签： html css iphone mobile-safari viewport