Question

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

使用“@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)

但没有改变。

任何提示？感谢

Answer 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一样，它应该有效。该页面也是一个很好的书签，供将来参考。

Answer 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

移动样式表不适用于iPhone

2 个答案: