视口设置不适用于 iPhone

Question

我尝试了各种不同的视口设置，但感觉 CSS 中的某些内容会导致覆盖我为 iPhone 查看指定的任何内容。

最令人沮丧的是，我创建了另一个具有相同 CSS 的网站，而 iPhone 浏览对于该网站来说不是问题。

这是page，我无法全宽显示 iPhone 查看。我应该注意到它在 iPad 上运行良好，无论是水平视图还是垂直视图。

使用的标签：

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

Answer 1

当然它不会显示整个页面的宽度，只是因为这里有这行：

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

您的页面宽度约为 560 像素，而 iPhone 屏幕的宽度在 ~320 像素到 ~420 像素之间。

我是否可以建议您使用媒体查询来使您的网站具有响应性？

类似

@media all and (max-width: 559px)
{
    //Insert mobile CSS here
}

Answer 2

对于我使用的 iPhone：

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

和一个媒体查询：

@media only screen and (min-width: 240px) and (max-width: 415px) { 

}

忘记了 414px 宽的 iPhone 6 Plus

iPhone 6 的尺寸是 375 × 667，iPhone 6 Plus 是 414 × 736

因此，要让这些工作从长远来看，您的媒体查询需要达到 736，因此：

@media only screen and (min-width: 240px) and (max-width: 736px) { 

}