移动样式表不适用于 iPhone答案

【问题标题】：mobile stylesheet not working on iPhones移动样式表不适用于 iPhone
【发布时间】：2012-06-12 00:48:01
【问题描述】：

我刚刚编写了一些规则，以便在智能手机上显示我的网站的移动版本。

使用“@media”将移动规则包含在默认样式表 (http://www.flapane.com/style.css) 的底部。

@media only screen and (min-device-width : 320px) and (max-device-width : 480px), only screen and (orientation : landscape) and (min-device-width : 480px) and (max-device-width : 800px), only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1)
 { [CODE]
}

我在 480x800 的 Android 设备上成功测试了它。它适用于横向和纵向模式。 (http://i.imgur.com/mhqhr.png)

但是我在几个朋友的iPhone4上测试过，一直显示桌面版。

我试过只用

@media only screen and (-webkit-min-device-pixel-ratio : 2)

但没有任何改变。

有什么提示吗？谢谢

【问题讨论】：

标签： iphone css media-queries

【解决方案1】：

将@media only screen and (-webkit-min-device-pixel-ratio : 2) 更改为：

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)

就像this example 一样，它应该可以工作。该页面也是一个很好的书签，以供将来参考。

【讨论】：

谢谢，这是我在尝试创建移动样式表之前阅读的第一页。我尝试使用您的代码，但没有任何改变（我更改了我的 Firefox 用户代理）。考虑到在我更改用户代理后 Google 和 Stackoverflow 切换到移动布局，这很奇怪。老实说，我没有任何线索。
嗯，很奇怪。我刚刚通过 CSS 验证器运行您的代码，它吐出“风景不是方向值”。尝试删除部分媒体查询，尤其是。方向部分，看看有没有什么效果......
是的，我注意到了这个错误（即使横向是方向的已知值）。但是，我通过删除媒体查询中的所有内容然后仅使用您的 sn-p 来测试您的代码，以避免冲突。当我注意到没有任何变化时，我恢复到包含方向部分和其余部分的原始版本。
我想我明白了！从宽度中删除单词“only”和“device”，所以你的参数看起来像这样：@media screen and (min-width : 320px)
谢谢，完成！你有 iPhone4 吗？我没有，而且网络上的大多数模拟器都需要 Safari。

【解决方案2】：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px), only screen and (min-device-width : 480px) and (max-device-width : 800px) and (orientation : landscape), only screen and (device-width: 768px), only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5)

似乎也可以在 iPhone 上使用

【讨论】：