iPhone 5未正确显示网站的响应模式

Question

我创建了this website，到目前为止，我还没有找到为什么只在某些iPhone手机上，网站没有以响应模式显示。 （它在大多数iPhone手机上都能正确显示。）

这是我到目前为止所做的：

1. 检查Android设备上的网站：它看起来不错
2. 检查不同浏览器上的响应式网站：它可以正常工作
3. 使用在线iphone模拟器查看网站的外观：显示正常
4. 清除iPhone设备上的浏览器缓存和Cookie，显示响应模式时出现问题：仍然没有运气

以下是网站主页应该如何在iphone中显示的屏幕截图。

Answer 1

尝试使用以下媒体查询

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */}

您使用的是max-width，它是目标显示区域的宽度，其中max-device-width是设备整个渲染区域的宽度。

我希望它能帮到你

Answer 2

我认为您的问题不是使用视口元标记。移动设备的像素密度通常比桌面显示器高得多，这可能导致媒体查询无法正确读取。

尝试在您的头部添加这样的内容：

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

Answer 3

meta viewport标记不是问题。

几个viewport tests看起来应该如此。

查看CSS媒体调用，简化它们并确保它们不会相互覆盖。
Javascript也不是问题。我已经全部禁用了。

您还可以利用iPhone的特定媒体查询：

<!-- iPhone 4+ -->
@media only screen and (device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    /* CSS3 Rules for iPhone */
}

希望这有帮助！

Answer 4

尝试iphone5的宽度为568

Answer 5

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
and (device-width : 320px) 
and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

Answer 6

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
and (device-width : 320px) 
and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}
}