CODEWITHSUNDEEP
css
Peter123
Peter123

Reputation: 31

CSS media queries not working when changing orientation on Nexus 7 2013

I'm currently testing CSS media queries on my laptop, desktop PC and Nexus 7 2013. They all work fine on the desktop and laptop, except Nexus 7. When I change orientation the styles do not apply, unless I refresh the page. For example: When holding the device in portrait mode, the page is fine. When I turn it in landscape mode, the page breaks. When I refresh the page however, it loads the landscape styles. I'm not sure what I'm doing wrong.

Here is my code:

HTML:

    <!DOCTYPE HTML>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<link rel="stylesheet" media="screen" href="styles.css">
<body>

Content goes here!

</body>
</html>

CSS:

    /*iPhone PORTRATE*/
@media screen and (max-width:321px) and (min-width:3px){
html{background-color:yellow;}}

/*iPhone LANDSCAPE*/
@media screen and (max-width:480px) and (min-width:322px){
html{background-color:cyan;}}

/*533px*/   
@media screen and (max-width:533px) and (min-width:481px){
html{background-color:pink;}}

/*iPhone 5 LANDSCAPE*/
@media screen and (max-width:568px) and (min-width:534px){
html{background-color:green;}}

/*Resolutions bellow 800px must be tested on specific devices*/

/*600 px - Nexus 7 2013 portrait*/
 @media only screen and (max-device-width : 600px) and (min-device-width : 569px) and (orientation : portrait){
html{background-color:orange;
 }}

/*960 px - Nexus 7 2013 Landscape*/
@media only screen and (max-device-width : 960px) and (min-device-width : 601px) and (orientation: landscape){
html{background-color:red;
}}

/*Desktop and laptop*/

/*800px*/
@media screen and (max-width:800px) and (min-width:601px){
html{background-color:grey;
}}

/*1024px*/  
@media screen and (max-width:1024px) and (min-width:961px){
html{background-color:black;
}}

/*1152px */ 
@media screen and (max-width:1152px) and (min-width:1025px){
html{background-color:blue;
}}

/*1280px*/
@media screen and (max-width:1280px) and (min-width:1153px){
html{background-color:brown;
}}

/*1366px*/
@media screen and (max-width:1366px) and (min-width:1281px){
html{background-color:black;
}}


/*1440px*/
@media screen and (max-width:1440px) and (min-width:1367px){
html{background-color:purple;
}}

/*1600px*/
@media screen and (max-width:1600px) and (min-width:1441px){
html{background-color:lime;
}}

/*1776px*/
@media screen and (max-width:1776px) and (min-width:1601px){
html{background-color:silver;
}}

/*1920px*/
@media screen and (max-width:1920px) and (min-width:1777px){
html{background-color:chocolate;
}}

Upvotes: 3

Views: 3507

Answers (1)

Snade
Snade

Reputation: 166

I prefer using only "max-width" and "min-width", because this targets the Viewport, not the device. That way, when you rotate the device, the viewport changes, so will the loaded media query.

Also I believe you have way too many media queries, and probably some of them are interfering.

Forget about the different types of devices, think only of resolutions. Nowadays you dont know if 1024px device is a high end phone, regular tablet, or small desktop. Or if 768 is tablet portrait or phone landscape.

Have fewer breakpoints, and make sure that your design fits in the lowest part of each media query. For example, when making the 320-480 media query, test on 320px, if it fits good, it will also fit in 479px nicely.

your breakpoints should be 0 - 319 320-479 480-767 768-989 990-1200 and maybe some for 1600+ and 1900+

Made quite a few responsive websites using these brakepoints, and they all work awesome on any device.

Upvotes: 1

Related Questions