【发布时间】：2013-12-10 13:46:44
【问题描述】：
这个小 HTML 代码非常清楚地代表了我的 HTML5 页面。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pebble Go</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
</head>
<body>
<style>
@media only screen and (orientation: portrait) {
html, body {
background: #222;
}
}
@media only screen and (orientation: landscape) {
html, body {
background: #000;
}
}
</style>
</body>
</html>
因此，在桌面浏览器、Android 桌面和手机上 - 它运行良好。但在 iPad mini 上 - 它不是！ …结果是 - 背景总是灰色的。所以我的问题是：
为什么这个媒体查询在 iPad mini 上不起作用…… ??? …
PS：我知道我也必须使用 max-device-width 属性，但我有一个很大的理由不这样做！ …
此页面的要求是 100% 宽和高，我决定：
- 为横向模式设置默认 CSS 规则；
- 为横向模式下的不同宽度定义规则；
- 定义纵向变体，基本依靠“orientation: Portrait”，同时定义不同的宽度。
我做到了！它正在工作！ … 除了 iPad mini ！！！ …如果我使用 max-device-width 或类似的东西 - 那么我将不得不为横向编写不同的规则 - 不同的宽度，纵向模式 - 不同的宽度，然后是移动设备 - 横向和肖像……！！！ ……
【问题讨论】：