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

Posted 2023-03-06

【中文标题】iPhone 5 无法正确显示网站的响应模式

【英文标题】：iPhone 5 is not displaying the responsive mode of the website correctly

【发布时间】：2013-10-11 18:06:43

【问题描述】：

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

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

在安卓设备上查看网站：看起来不错 在不同的浏览器上检查响应式网站：它可以工作 使用在线 iphone 模拟器查看网站的外观：显示良好 在显示响应模式时出现问题的 iPhone 设备上已清除浏览器缓存和 cookie：仍然没有成功

这是网站主页在 iphone 中的外观的屏幕截图。

【问题讨论】：

我看到您正在使用引导程序...为什么不使用引导程序功能？我想说如果你升级到 Bootstrap v3，你的问题应该很容易解决。

【参考方案1】：

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

【参考方案2】：

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

【参考方案3】：

尝试使用以下媒体查询

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

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

希望对你有帮助

【讨论】：

不幸的是，这对我也不起作用。我在此线程上尝试了您的建议和其他人的其他建议，但“有故障的 iphone”似乎没有考虑到其中任何一个。

好吧，我也可以在 android 设备上看到问题而且我认为这是因为 100% 的高度，所以它得到了设备的高度而不是宽度，所以你可以尝试 100% 的宽度100% 的高度。根据我的说法，好的方法是使用 min-width 和 max-width

您关于 100% 身高的评论挽救了我的生命 :) 我在手机上将身高设置为自动，现在它可以完美运行了。

Farjam，我现在也遇到了同样的问题。它似乎在 Android 手机上显示良好，但在 Iphone 上则不然。在模拟器等上看起来不错。我尝试将身体设置为自动高度，但它对我不起作用。有什么建议吗？

【参考方案4】：

iphone5试试568的宽度

【参考方案5】：

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

希望这会有所帮助！

【讨论】：

不幸的是，这对我也不起作用。我在此线程上尝试了您的建议和其他人的其他建议，但“有故障的 iphone”似乎没有考虑到其中任何一个。

【参考方案6】：

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

尝试在头部添加类似的内容：

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

【讨论】：

我在头部有确切的行 :)

啊，我很抱歉没有看到这一点。在这种情况下，请尝试确保有问题的设备没有在可访问性设置中启用“缩放”。更改此设置通常可以解决此问题，只需确保在更改后刷新页面即可。

我刚刚检查并确认也没有启用缩放。