css - 媒体屏幕查询在 iPhone 中不起作用

Question

我需要 iPhone4(宽度:340；高度:480)和 iPhone 的 css 媒体查询
5(宽度:340；高度:570)。均采用纵向模式。

For iPhone 5 
@media only screen and (max-width : 340px) and (max-height : 570px)
 {
  body
 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 340px;
  height: 570px;
  z-index: 45;
  }
 .row2 
{
 position: absolute;
 left: 0px;
 top: 0px;
 width: 340px;
 height: 570px;
 z-index: 44;
}
._2_1
     {
 position: absolute;
 left: 4px;
 top: 151px;
 width: 80px;
 height: 78px;
 z-index: 43;
 }
 }

For iPhone 4

              @media only screen and (max-width : 340px) and (max-height : 480px)
                  { 
                  /*styles*/
                  }

此代码在 iPhone 5 中不起作用。在 iPhone 5 中加载时，它使用 iPhone 4 的 css 加载

示例 CSS

@media only screen and max-width : 570px) {
        body 
         {
            position:absolute !important;
            left: 0px;
            top: 0px;
            width: 340px;
            height: 570px;
            z-index: 45;
        }
        .row2 {
            position:absolute !important;
            left: 0px;
            top: 0px;
            width: 340px;
            height: 570px;
            z-index: 44;
        }
        ._2_1 {
            /*background-image: url("images/2 1.png");*/
            position:absolute !important;
            left: 4px;
            top: 151px;
            width: 80px;
            height: 78px;
            z-index: 43;
        }
        ._2_2 {
            position:absolute !important;
            left: 118px;
            top: 150px;
            width: 82px;
            height: 80px;
            z-index: 42;
        }
    }.........
.......
}

Answer 1

试试这个

iPhone4

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3)
{
    ...
}

仅适用于 iphone5(横向和纵向模式)

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) 
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71)
{
   ...
}

任何特定的模式说肖像

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
   ...
}

Reference