2

在一个 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 英寸属性进行

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

4

4 回答 4

3

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

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

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

有关更多信息，我建议您阅读来自 quirksmode.org 的这篇文章。

于 2013-06-09T16:49:14.107 回答
3

试试这个媒体查询？

iPhone 5媒体查询

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

*SO Link iPhone 5 CSS 媒体查询

于 2013-07-02T07:28:38.367 回答
2

尝试使用这个：

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

        }
}

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

于 2013-06-30T11:45:59.507 回答
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 */
}
于 2013-07-01T15:51:51.123 回答