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 */}

您使用的最大宽度是目标显示区域的宽度，而最大设备宽度是设备整个渲染区域的宽度。

希望对你有帮助