iPhone 5媒体查询

Question

在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英寸属性制作

任何想法为什么以及如何使其发挥作用？

Answer 1

如果您想要的目标不仅仅是iOS设备，最好避免使用设备媒体查询。在iOS上，这些查询始终反映纵向宽度和高度，无论方向如何。在Android和其他操作系统上，设备宽度和高度将根据方向而改变。

因此，如果要使用与所有设备上当前方向的宽度和高度一致的媒体查询，则应使用max-width / max-height而不是max-device-width / max-device-height 。这也是桌面浏览器的最大意义，因为您对浏览器窗口的大小比对用户监视器的大小更感兴趣。

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

有关详细信息，我建议您阅读quirksmode.org上的this article。

Answer 2

试试这个媒体查询？

iPhone 5媒体查询

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

* SO链接iPhone 5 CSS media query

Answer 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

        }
}

希望这可以帮助你或照亮其他方式;）

Answer 4

为什么不将其分解为几个不同的查询？

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

调整iPhone 5分辨率的布局

4 个答案:

iPhone 5媒体查询