CSS fails when changing device orientation

Question

when I am changing my web page's orientation from portrait to landscape in mobile, it is displaying correctly. But again changing from landscape to portrait alignment is not correct.

I am using meta tag like this:

<meta name="viewport" content="width=device-width, maximum-scale=2.0, initial-scale=1, minimum-scale=1.0, user-scalable=yes, shrink-to-fit=no">

I have found that when applying landscape mode width is changing to width=device-height in meta tag. But again if I am turning to portrait means width is not changing to width=device-width in meta tag, it is still persists in width=device-height. how to fix this issue?

Rachel Gallen Rachel Gallen · Accepted Answer · 2016-07-11T09:42:47

I think you should link in either 2 stylesheets, one for portrait and one for landscape OR define your styles with media queries using orientation

In the following example i have included both, but either will do.

e.g.

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" media="all and (orientation:portrait)"src="portrait.css">
<!---portrait css contains @charset "utf-8";
img{width:400px;}--->
<link rel="stylesheet" media="all and (orientation:landscape)" src="landscape.css">
<!---landscape.css contains @charset "utf-8";
img{width:600px;}---->
<title>Simple orientation trial (view on device)</title>
<style>
img{max-width:400px;}

@media all and (orientation:portrait) {
    img{max-width:400px;}
}
@media all and (orientation:landscape) {
    img{max-width:600px;}

}
</style>
</head>
<img src="http://www.rachelgallen.com/images/daisies.jpg">
<body>
</body>
</html>

CSS fails when changing device orientation

2 Answers