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>
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:
Why is this media query not working on iPad mini … ??? …
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! …
The requirement for this page is to be 100% wide and high, and I decided to:
- Make the default CSS rules for landscape mode;
- Define rules for different widths in landscape mode;
- Define the portrait variants, relying basically on "orientation: portrait", and define different widths as well.
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 … !!! ….
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 :) ...
来源：https://stackoverflow.com/questions/20199764/orientation-media-query-not-working-on-ipad-mini