Orientation media query not working on iPad mini

问题

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 … !!! ….

回答1:

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

标签

css

ipad

media