Question

我需要iPhone4的css媒体查询（宽度：340;高度：480）＆amp; 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中不起作用。在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

来自this site:

iPhone 2G-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 */ 
}

Answer 2

试试这个

对于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

Answer 3

使用min-height和max-height

尝试此操作

对于iphone 4

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

Answer 4

您可以在此网站上查看与CSS相关的问题CSS TRICKS

Answer 5

/ * iPhone 2G-4S的肖像和放大器风景 / @ 媒体专用屏幕和（min - 设备 - 宽度：320 px）和（最大 - 设备 - 宽度：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中运行

5 个答案: