調整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上的這篇文章 。

Answer 2

試試這個媒體查詢？

iPhone 5媒體查詢

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

* SO鏈接iPhone 5 CSS媒體查詢

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