Sample html page with orientation media queries below
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iPad mini Orientation issue</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) {
body {
border:solid red 1px;
}
}
@media only screen and (orientation: landscape) {
body {
border:solid blue1px;
}
}
</style>
</body>
</html>
Body border won't change if we change the orientation in iPad mini, i have faced the same issue when I do this.
Finally found the issue in viewport meta tag.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
Remove height=device-height from viewport meta tag, will do the trick and orientation media queries will work as expected.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iPad mini Orientation issue</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) {
body {
border:solid red 1px;
}
}
@media only screen and (orientation: landscape) {
body {
border:solid blue1px;
}
}
</style>
</body>
</html>
Body border won't change if we change the orientation in iPad mini, i have faced the same issue when I do this.
Finally found the issue in viewport meta tag.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
Remove height=device-height from viewport meta tag, will do the trick and orientation media queries will work as expected.
