1

I am facing a very strange issue with Nexus 7 regarding CSS media queries. The media query runs fine on orientation change, but if we keep the device in landscape mode and keep it idle for some time and then on orientation change the viewport takes the styling of the landscape mode other than the portrait mode styling.

Here is the code that I have written 

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div></div>
</body>
</html>

And in the css file the styling is as below.

div {height: 500px; width: 500px;}

@media only screen and (min-width:480px) {
div {background: red;}
}
@media only screen and (min-width:768px) {
div {background: green;}
}

For other devices like Ipad, Iphone, S3 etc the media queries runs fine even if these devices are kept idle and then on orientation it takes the respective viewport styling, but on Nexus 7 the div colour remains green when the orientation changes from landscape to portrait view after the device is kept idle for some time.

Please help me out with this situation.

Ido.Co
  • 5,317
  • 6
  • 39
  • 64
Joel
  • 11
  • 2

1 Answers1

0

Try updating your viewport meta tag attributes <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Sunil Kumar
  • 1,718
  • 16
  • 33
  • I updated the meta viewport to but still no solution, also have tried with all the known methods of media queries with no success. – Joel Jul 25 '13 at 10:41
  • You can also read more on viewport meta information that can help you debug resolve your posted issue http://developer.android.com/guide/webapps/targeting.html – Sunil Kumar Jul 25 '13 at 10:41
  • Have read and implemented all the given suggestions in the android developer forum, still to no avail – Joel Jul 25 '13 at 10:59