7

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

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

  1. 在安卓设备上查看网站：看起来不错
  2. 检查不同浏览器上的响应式网站：它有效
  3. 使用在线 iphone 模拟器查看网站的外观：显示正常
  4. 清除了显示响应模式问题的 iPhone 设备上的浏览器缓存和 cookie：仍然没有运气

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

在此处输入图像描述

4

6 回答 6

9

尝试使用以下媒体查询

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

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

我希望它会帮助你

于 2013-10-10T12:11:12.633 回答
6

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

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

<meta name="viewport" content="width=device-width,initial-scale=1" />
于 2013-10-04T17:06:39.533 回答
0

iphone5试试568的宽度

于 2013-10-09T10:18:57.010 回答
0

meta viewport标签不是问题。

几个视口测试看起来像它应该的那样。

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

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

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

希望这可以帮助！

于 2013-10-07T20:44:03.140 回答
0 
/* 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*/
}
于 2014-07-09T15:29:34.820 回答
0 
/* 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*/
}
}
于 2016-11-25T11:10:45.817 回答