Media Queries CSS not working correctly on IPAD

[robinantill]

I have created a styles sheet to reflect different size screens at

different breakpoints.
1/ up to 767px
2/ 768 – 800px (red background)
3/ 801 – 1024px -landcape (yellow background)
4/ over 1025 (blue background)

I have <meta name=”viewport” content=”width=device-width, initial-

scale=1.0″ /> in the page header. Web page size is set at 1000px wide.

1 works fine
2 works fine on desktops and IPAD in portrait mode
3 works fine on desktops. If IPAD is opened in Landscape mode the web page display all the web page (1000px wide) on the screen (viewport?).

If you then go to Portrait mode it displays (2) red background which is correct. HOWEVER if you turn the IPAD back to Landscape mode we go back to the (3) yellow background and is the correct width BUT the web page is not displayed within the viewport.
4 works fine

In yellow I have tried changing width from 100% to 1000px.
In yellow I’ve changed min-width to 801px which then mucks up the desktop on a 800px wide screen.

I can’t seem to find what is wrong. Can someone advise me what I should be doing please.

Code as follows:-
/* up to 767px */
@media screen and (max-width: 767px){
#content {position: relative; float: left; background: #FFFFFF; width: 700px; }
.left_column_mobile {display:none;}
.right_column+mobile {display:none;}
}

/* up to 800px RED */
@media screen and (min-width : 768px) and (max-width : 800px) {
#wrapper {margin: 0 auto; width:800px; max-width:800px; background: #ffffff;} / WRAPPER IS OVERALL AREA FOR WEB PAGE */
#content {position: relative; float: left; background: red; width: 680px; }
.left_column_mobile {background: #993333; width: 120px; float: left;}
.right_column_mobile {display:none;}
}

/* up to 1024 YELLOW (IPADS and desktop */
@media screen and (min-width: 768px) and (max-width : 1024px) and (orientation : landscape){
#wrapper {margin: 0 auto; width: 100%; background: yellow;} / WRAPPER IS OVERALL AREA FOR WEB PAGE */
#content {position: relative; float: left; background: yellow; width: 700px; }
.left_column_mobile {background: #993333; width: 120px; float: left;}
.right_column_mobile {background: #993333; width: 180px; float: left;}
}

/* larger than 1025 pixels BLUE */
@media screen and (min-width: 1025px){
#wrapper {margin: 0 auto; width: 1000px; background: blue;} / WRAPPER
IS OVERALL AREA FOR WEB PAGE */
#content {position: relative; float: left; background: blue; width: 700px; }
.left_column_mobile {background: #993333; width: 120px; float: left;}
.right_column_mobile {background: #993333; width: 180px; float: left;}
}

[robinantill]

Just to let anyone know. I appeared to have found the problem which was in meta-name as follows:-

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″, maximum-scale=1.0__/>

[Author]

Posts