Question

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

我总共有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浏览器上的横向媒体查询失败了吗？有任何想法吗？我的'max-device-width'错了吗？

Answer 1

那是因为大多数较新的Android手机都是480宽800高，具体取决于设备，所以你的写作方式，Android风景应该被平板电脑风景css选中。但是我觉得我遇到了一个类似的问题，Android没有拿起样式表，所以我添加了这个，一切似乎都有用......

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

你的样式表链接上面是否有这个？

Answer 2

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

媒体查询在Android浏览器上失败

2 个答案: