【问题标题】：Adjusting layout for iPhone 5 resolution调整 iPhone 5 分辨率的布局
【发布时间】：2013-06-05 08:30:43
【问题描述】：

在一个 HTML 项目中，我使用 css 来调整特定屏幕尺寸的内容布局，例如 iPad 版图；

/*
##########################################################################
##########################################################################
    iPad Layout Landscape: 1024px.
    Content-Element width: 896px.
    Gutters: 24px.
    Outer content margins: 64px.
    Inherits styles from: Default Layout.
##########################################################################
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    
##########################################################################
##########################################################################
*/

@media only screen and (max-device-width: 1024px) and (orientation:landscape) {

}

那一个有效，但我正在使用 iPhone 5 肖像；

  /*
iPhone 5 portrait view
*/
@media screen and (max-device-width: 640px) and (max-device-height: 1136px) and (orientation:portrait) {
}

哪个不行，就是显示为iPhone 4版本（

/*
######################################################################### 
##########################################################################
        Overrides styles for devices with a 
device-pixel-ratio of 2+, such as iPhone 4.
######################################################################### 
##########################################################################
*/

@media 
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {
    }

)。
关键是，这些适用于所描述的设备，但在 iPhone 5 上，它与 iPhone 4 设置一起显示，需要针对 Retina 4 英寸属性进行设置

任何想法为什么以及如何使其工作？

【问题讨论】：

标签： iphone ios css retina-display

【解决方案1】：

试试这个媒体查询？

iPhone 5 媒体查询

@media screen and (device-aspect-ratio: 40/71) {
    /* styles for iPhone 5 goes here */
}

*SO链接iPhone 5 CSS media query

【讨论】：

【解决方案2】：

为什么不把它分解成几个不同的查询呢？

@media only screen and (max-width : 1024px) {
}
@media only screen and (max-width : 640px) {
}
@media only screen and (max-height : 1136px) {
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
}
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
  /* 1.25 dpr */
}
@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){ 
  /* 1.3 dpr */
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){ 
  /* 1.5 dpr */
}

【讨论】：

【解决方案3】：

尝试使用这个：

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){

        CGSize result = [[UIScreen mainScreen] bounds].size;
        CGFloat scale = [UIScreen mainScreen].scale;
        result = CGSizeMake(result.width *scale, result.height *scale);

        //here you can use height or width if depend for landscape or portrait
        if(result.height == 960){

        //here wat you need to load

        }
}

希望这对您有所帮助或启发其他方式；）

【讨论】：

【解决方案4】：

如果您想定位的不仅仅是 iOS 设备，最好避免设备媒体查询。在 iOS 上，这些查询总是反映纵向宽度和高度，无论方向如何。在 Android 和其他操作系统上，设备的宽度和高度会根据方向而变化。

因此，如果您想在所有设备上使用始终匹配当前方向的宽度和高度的媒体查询，您应该使用 max-width/max-height 而不是 max-device-width/max-device-height .这对桌面浏览器也有最大的意义，因为您对浏览器窗口的大小比对用户显示器的大小更感兴趣。

在移动设备上处理媒体查询时，您应该始终做的另一件事是使用width=device-width 设置视口元标记。如果您不这样做，媒体查询通常会反映一个完全不是您所期望的虚拟视口。

如需更多信息，我建议阅读来自 quirksmode.org 的this article。

【讨论】：

谢谢，我想我明白了，但是 max-width 和 max-height 仍然会导致同样的不合适，你怎么看？
@ValKalinic 如果您还没有这样做，您还应该设置视口元标记 - 有关详细信息，请参阅答案。