媒体查询不适用于iPhone和iPad [英] Media Query not working for iPhone and iPad

问题描述

@media 查询在 iPhone 5和iPad 4 OS 的情况下无效。我已使用以下 CSS 为每个操作系统和设备设置不同的屏幕。

我明确检查了我的iPad和iPhone宽度和高度，只有我保留了媒体查询。这在ANDROID操作系统上起作用正确。

  / * @ media print {* / 
 / * iPhone 5（Portrait）* / 
 @media screen and（max-device-height：568px）and（orientation：portrait）{
 #map_canvas {
 border：1px dotted＃C0C0C0 ; 
 width：290px; 
 height：473px; 
} 
} 
 
 / * iPad 4（Portrait）* / 
 @media屏幕和（max-device-height：1024px） {
 #map_canvas {
 border：1px dotted＃C0C0C0; 
 width：735px; 
 height：929px; 
} 
} 
 
 / * iPad 4（横向）* / 
 @media屏幕和（最大设备宽度：1024像素） {
 #map_canvas {
 border：1px dotted＃C0C0C0; 
 width：990px​​; 
 height：673px; 
} 
} 
 
 / *三星10.1英寸（Portrait）* / 
 @media屏幕和（max-device-height：1280像素） ）{
 #map_canvas {
 border：1px dotted＃C0C0C0; 
 width：790px; 
 height：1140px; 
} 
} 
 
 / *三星10.1英寸（横向）* / 
 @media屏幕和（最大设备宽度：1280像素）和）{
 #map_canvas {
 border：1px dotted＃C0C0C0; 
 width：1230px; 
 height：680px; 
} 
} 
 
 / * Samsung 7.0英寸（Portrait）* / 
 @media屏幕和（max-device-height：1024px） ）{
 #map_canvas {
 border：1px dotted＃C0C0C0; 
 width：570px; 
 height：875px; 
} 
} 
 
 / *三星7.0英寸（横向）* / 
 @media屏幕和（最大设备宽度：1024像素）和）{
 #map_canvas {
 border：1px dotted＃C0C0C0; 
 width：990px​​; 
 height：455px; 
} 
} 
 
 @media all和（orientation：landscape）{
 html，body {
 height：auto; 
} 
} 
  

每次我在上述代码中进行了各种更改，我得到的LAST CSS引用应用的风格。

我发现一个链接，（我还没有尝试，但会尽快尝试，因为mac是可用的）但对此也有疑问（ iphone / ipad媒体查询问题）。任何人都可以解释在这种情况下像素比率是重要的原因。

解决方案

摘自 http://mislav.uniqpath.com/2010/04/targeted-css/

您应该注意，定向媒体查询虽然在iPad上支持，但在iPhone上不工作（使用v3.1.3测试）。幸运的是，像width和device-width这样的大小查询工作，所以布局切换可能没有JavaScript和一些组合。

@media query is not working in case of iPhone 5 and iPad 4 OS. I have used following CSS for styling each OS and device for different screen.

I explicitly checked that my iPad and iPhone width and height and based on that only i have kept the media queries. This works fine on ANDROID OS.

/*@media print {*/
/* iPhone 5 (Portrait) */
@media screen and (max-device-height: 568px) and (orientation: portrait) {
     #map_canvas {
        border: 1px dashed #C0C0C0; 
        width: 290px;
        height: 473px;
      }
}

/* iPad 4 (Portrait) */
@media screen and (max-device-height: 1024px) and (orientation: portrait) {
 #map_canvas {
    border: 1px dashed #C0C0C0; 
    width: 735px;
    height: 929px;
  }
}

/* iPad 4 (Landscape) */
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
  #map_canvas {
    border: 1px dashed #C0C0C0;
    width: 990px;
    height: 673px;
  }
}

/* Samsung 10.1 inch (Portrait) */
@media screen and (max-device-height: 1280px) and (orientation: portrait) {
 #map_canvas {
    border: 1px dashed #C0C0C0; 
    width: 790px;
    height: 1140px;
  }
}

/* Samsung 10.1 inch (Landscape) */
@media screen and (max-device-width: 1280px) and (orientation: landscape) {
 #map_canvas {
    border: 1px dashed #C0C0C0; 
    width: 1230px;
    height: 680px;
  }
}

/* Samsung 7.0 inch (Portrait) */
@media screen and (max-device-height: 1024px) and (orientation: portrait) {
 #map_canvas {
    border: 1px dashed #C0C0C0; 
    width: 570px;
    height: 875px;
  }
}

/* Samsung 7.0 inch (Landscape) */
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
  #map_canvas {
    border: 1px dashed #C0C0C0;
    width: 990px;
    height: 455px;
  }
}

@media all and (orientation: landscape) {
  html, body {
    height: auto;
  }
}

Each time i tested with various changes in above code, I am getting the LAST CSS being referred for applying the style.

I found one link, (which i have not yet tried but going to try soon as mac is available) but have question about that too (iphone/ipad media query issues). Can anyone explain the reason behind that Is pixel ratio matters in this case??

解决方案

Excerpted from http://mislav.uniqpath.com/2010/04/targeted-css/

You should be aware that orientation media query, although supported on the iPad, doesn’t work on the iPhone (tested with v3.1.3). Fortunately, size queries like width and device-width work, so layout-switching is possible without JavaScript with some combination of those.

这篇关于媒体查询不适用于iPhone和iPad的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！