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

我需要一个iPhone4的css媒体查询宽度：340；身高：480和iPhone 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中不起作用。在iPhone5中加载时，它会加载iPhone4的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;
        }
    }.........
.......
}

从

iphone2g-4S人像

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) 
{ 
   /* STYLES GO HERE */ 
}

iPhone 5的肖像：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) 
{ 
  /* STYLES GO HERE */ 
}

试试这个

对于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)
{
    ...
}

仅适用于iPhone 5的横向和纵向模式

@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)
{
   ...
}

使用“最小高度”和“最大高度”进行尝试

适用于iPhone4

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

适用于iphone 5

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

---

您可以在本网站上查看CSS相关问题

/*iPhone 2G-4S的纵向和横向/@ 仅媒体屏幕 最小值-设备-宽度：320像素 andmax-设备-宽度：480像素 webkit-device-pixel-ratio:2和device-aspect-ratio:2/3{/STYLES GO HERE*/}

/* iPhone 5 & 5S in portrait & landscape */
@
media only screen
and(min - device - width: 320 px)
and(max - device - width: 568 px)
and(-webkit - device - pixel - ratio: 2) and(device - aspect - ratio: 40 / 71) { /* STYLES GO HERE */ }

/* iPhone 6 in portrait & landscape */
@
media only screen
and(min - device - width: 375 px)
and(max - device - width: 667 px)
and(-webkit - device - pixel - ratio: 2) and(device - aspect - ratio: 667 / 375) { /* STYLES GO HERE */ }


/* iPhone 6 plus in portrait & landscape */
@
media only screen
and(min - device - width: 414 px)
and(max - device - width: 736 px)
and(-webkit - device - pixel - ratio: 3) and(device - aspect - ratio: 16 / 9) { /* STYLES GO HERE */ }  

---

如果只需要特定方向的媒体查询，只需添加到和方向：纵向和方向：横向。

什么都不能更改意味着什么？您是否使用任何工具来测试或在iphone本身上进行测试？Till为iphone 5加载iphone 4的css。您是否可以尝试在iphone 5@media device height:568px和-webkit min device pixel ratio:2{}上进行此操作？是的。但仍然为iphone 5加载iphone 4的css最终尝试：iphone<5：媒体屏幕和设备纵横比：2/3{}iPhone5：媒体屏幕和设备纵横比：40/71{}@user2376463-尝试切换媒体查询的顺序。首先是iphone4，然后是iPhone5，您在iphone4中使用的类可能更具体。尝试添加！对你的一些iphone5规则很重要-它现在起作用了吗？如果可能的话，添加你在其中使用的css类和通用csssample@RaunakKathuria它有几个类…css的一些示例或片段也可以。。添加您在媒体查询中添加的内容尝试此链接@Raunakathuria我已经用一些片段编辑了该问题。请找到它们。@Danield No.No.在第二部分中检查最小高度而不是最大宽度。您是在检查真实设备吗？