视口设置无法使用iPhone

Question

我已经尝试了各种视口设置的变体，但感觉CSS中的某些内容会导致我为iPhone查看指定的内容进行覆盖。

最让我感到沮丧的是，我创建了另一个具有相同CSS和iPhone查看功能的网站并不是该网站的问题。

这是page我无法以全宽度显示iPhone观看。我应该注意到它在iPad上工作正常，无论是横向还是横向。垂直视图。

使用的标签：

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

Answer 1

对于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) { 

}

Answer 2

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

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

您的页面宽度约为560px，而iPhone屏幕的宽度介于~320px和~420px之间。

我可能建议您使用媒体查询来使您的网站响应？

像

这样的东西

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