html - iPhone 不会尊重大于 ~1000 的元视口(viewport)。任何超过 1000 的值都被视为 ~1000! :(

Question

目标是在 iPhone 上显示一个完全缩小的无响应网站。换句话说，该网站最初应该适合 iPhone 屏幕而无需水平滚动，然后用户可以捏合以放大。

通常，我不需要视口(viewport)元标记。当没有视口(viewport)元标记时，网站将自动缩小以适应移动屏幕，无需水平滚动。

但当网站宽度超过 ~1000px 时就不行了!当它变宽时，只有第一个 ~1000px 适合水平和水平滚动出现。

只有 iPhone 有这种行为。在 Android 上没问题。

我尝试使用相应的元标记强制视口(viewport)，发现 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

Answer 1

好的，我明白了。

根据 Safari Web Content Guide ,

The default value for minimum-scale is 0.25

因此，默认情况下强制执行更大的缩放级别。所以我们要放宽最小比例设置:

<meta name="viewport" content="width=1400; minimum-scale=0;">