方向媒体查询不工作在iPad mini [英] Orientation media query not working on iPad mini
问题描述
这个小的HTML代码非常清楚地表示我的HTML5页面。
This small HTML code represents my HTML5 page very clearly.
<!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 - 它不是！ ...结果是 - 背景总是灰色。所以我的问题是：
And so, on desktop browsers, Android tables and phones - it's working fine. But on iPad mini - it is not! … Result is - background is always gray. So my question is:
为什么这个媒体查询不工作在iPad mini？ ...
Why is this media query not working on iPad mini … ??? …
PS：我知道我必须使用max-device-width属性，但我有一个很大的理由不这样做！ ...
PS: I know that I have to use the max-device-width property as well, but I have a big reason not to do it! …
这个网页的要求是100％宽和高，我决定：
The requirement for this page is to be 100% wide and high, and I decided to:
- 为横向模式设置默认CSS规则;
- 在横向模式下为不同宽度定义规则;
我这样做了！它的工作！ ...除iPad mini！ ...如果我使用max-device-width或类似的东西 - 那么我会在一个情况下，我将不得不为景观 - 不同的宽度，肖像模式 - 不同的宽度，然后移动设备写作不同的规则 - 景观和肖像...！ ...。
I did this! It's working! … Except the iPad mini !!! … And if I use max-device-width or something like this - then I'll be in a situation where I'll have to write different rules for landscape - different widths, portrait mode - different widths, and then mobile devices - landscape and portrait … !!! ….
推荐答案
问题似乎是由视口的meta标签中的子句引起的，更具体地说：height = device -高度。删除它使一切工作正常:) ...
The problem appeared to be caused by the clause in the meta tag for the viewport, and more specifically: "height=device-height". Removing it made everything work normal :) ...
这篇关于方向媒体查询不工作在iPad mini的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
