Media queries in iOS 7 not working

▼魔方 西西 提交于 2019-12-11 12:04:53

问题


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>

回答1:


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.




回答2:


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

Make sure your html code includes this line.




回答3:


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);




回答4:


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 */
}



回答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.



来源:https://stackoverflow.com/questions/18952156/media-queries-in-ios-7-not-working

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!