4

我正在尝试开发一个 Web 应用程序，该应用程序根据设备（及其方向）应用适当的样式表。

我总共有 5 个媒体查询：

//for mobile phones in portrait mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/mobile-portrait.css">

//for mobile phones in landscape mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/mobile-landscape.css">

//for tablets (iPad) in portrait mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/tablet-portrait.css">

//for tablets (iPad) in landscape mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/tablet-landscape.css">

//for desktop computers
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="css/desktop.css">

一切都可以在桌面、iPad 和 iPhone（浏览器和网络应用程序版本）上运行，但横向媒体查询在 Android 浏览器上失败？有任何想法吗？我把“最大设备宽度”弄错了吗？

4

2 回答 2

1

这是因为大多数较新的 android 手机大约是 480 宽 x 800 高，具体取决于设备，所以按照您编写的方式，Android Landscape 应该被平板电脑景观 css 拾取。但我想我遇到了类似的问题，Android 没有选择样式表，所以我添加了这个，一切似乎都正常......

<meta name="viewport" content="width=device-width">

你的样式表链接上方有这个吗？

于 2011-07-18T23:36:24.950 回答
0

在 Droid1 上 - 视口大小为 320 x 569。

于 2011-07-22T20:03:30.443 回答