Media queries in iOS 7 not working

Question

I'm using a couple of media queries that target iPad and iPhone in landscape as well as portrait orientation, but as of iOS 7 they don't work anymore. They worked perfectly in iOS 6, though. Has anyone had a similar experience?

Here's part of the code I'm using:

<style type="text/css">
/* iPad (landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
.header {
font-family: courier new, monospace;
color: #999999;
font-size: 14pt;
line-height: 104%;
width: 37.5em; }
.action {  
font-family: courier new, monospace;
color: #999999;
font-size: 14pt;
line-height: 104%;
width: 37.5em; }
.character {  
font-family: courier new, monospace;  
color: #999999;
font-size: 14pt;
line-height: 104%;
padding-left: 12.25em;
width: 21em; }
.dialogue {
font-family: courier new, monospace;  
color: #999999;
font-size: 14pt;
line-height: 104%;
padding-left: 6.15em;
width: 22em; }
.info {  
display: none; }}
/* iPad (portrait) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.header {
font-family: courier new, monospace;
color: #999999;
font-size: 12pt;
line-height: 104%;
width: 37.15em; }
.action {  
font-family: courier new, monospace;
color: #999999;
font-size: 12pt;
line-height: 104%;
width: 37.15em; }
.character {  
font-family: courier new, monospace;  
color: #999999;
font-size: 12pt;
line-height: 104%;
padding-left: 12em;
width: 21em; }
.dialogue {
font-family: courier new, monospace;  
color: #999999;
font-size: 12pt;
line-height: 104%;
padding-left: 6em;
width: 22em; }
.info {  
display: none; }}
</style>

Answer 1

<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />

Make sure your html code includes this line.

Answer 2

i am experiencing the same problem. my meta tags as requested.

/* phone-portrait */ @import url("phone-portrait.css") only screen and (min-width:320px ) and (max-width: 568px ) and ( orientation: portrait );

/* phone4 -landscape*/ @import url('phone-landscapeFour.css') only screen and (min-width:321px ) and (max-width: 480px) and (orientation: landscape );

/* phone5 -landscape*/ @import url('phone-landscapeFive.css') only screen and (min-width:481px ) and (max-width: 568px) and (orientation: landscape );

/* ---------- Tablets ---------- */ @import url("tablet.css") only screen and (min-width: 569px ) and (max-width: 1024px) and (orientation: portrait);

@import url('tablet-landscape.css') only screen and (min-width: 569px) and (max-width: 1024px) and (orientation: landscape);

Answer 3

Use aspect-ratio and device-aspect-ratio instead. Bulletproof iOS media queries...

/* iPad: portrait */
@media screen and (aspect-ratio: 768/716) and (device-aspect-ratio: 768/1024), screen and (aspect-ratio: 768/1024) and (device-aspect-ratio: 768/1024) {
    /* styles here */
}

/* iPad: landscape */
@media screen and (aspect-ratio: 1024/372) and (device-aspect-ratio: 768/1024), screen and (aspect-ratio: 1024/768) and (device-aspect-ratio: 768/1024) {
    /* styles here */
}

/* iPhone 3.5" screen: portrait */
@media screen and (aspect-ratio: 320/220) and (device-aspect-ratio: 320/480), screen and (aspect-ratio: 320/480) and (device-aspect-ratio: 320/480) {
    /* styles here */
}

/* iPhone 3.5" screen: landscape */
@media screen and (aspect-ratio: 480/114) and (device-aspect-ratio: 320/480), screen and (aspect-ratio: 480/320) and (device-aspect-ratio: 320/480) {
    /* styles here */
}

/* iPhone 4" screen: portrait */
@media screen and (aspect-ratio: 320/308) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 320/568) and (device-aspect-ratio: 320/568) {
    /* styles here */
}

/* iPhone 4" screen: landscape */
@media screen and (aspect-ratio: 568/114) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 568/320) and (device-aspect-ratio: 320/568) {
    /* styles here */
}

Answer 4

Could you paste the media query you are trying to use to achieve the iPad only selection. I was having the same problem but noticed I had added text by accident that was causing one of my queries to not close correctly. Make sure all of your media queries and properties have been closed prior to your iPad query. Below is an example of the two queries I use to determine iPad and orientation:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

or

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){}

I have used these on multiple responsive designs I have created and they work correctly on both iOS6 and iOS7. Again, just checkout your code. May be your overlooking something quite simple. Hope this helps.

Answer 5

In my case the problem was in the meta tag viewport with the property: height=device-height Don't know why did I specified it. Maybe I broke something else in my project..

Removing it, orientation started working again on ios.