1

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

移动规则包含在使用“@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)

但没有任何改变。

有什么提示吗？谢谢

4

2 回答 2

0 
@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

于 2012-06-11T16:48:01.270 回答
0

更改@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)

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

于 2012-06-09T18:47:10.900 回答