Question

我正在尝试为iPad Pro 12.9英寸版本实施以下媒体查询，但在检查实际的iPad设备时它无法正常工作。

@media only screen   and (min-device-width: 1024px)   and (max-device-width: 1366px)   and (orientation: landscape)   and (-webkit-min-device-pixel-ratio: 2)
{
//CSS
}

上面的媒体查询适用于Chrome，但是当我检查实际设备甚至是xCode上的模拟器时，它都无法正常工作。我也尝试使用(-webkit-min-device-pixel-ratio: 2)。相同的结果

Answer 1

此处为12.9英寸iPad Pro的工作代码。由于信息的匮乏，我付出了很多努力，但我现在找到了工作参数。

// For both Portrait and Landscape
@media only screen
    and (min-device-width: 768px)
    and (max-device-width: 2732px)
    and (-webkit-min-device-pixel-ratio: 2){
       // CSS HERE
}

// For landscape
@media only screen
    and (min-device-width: 768px)
    and (max-device-width: 2732px)
    and (orientation:landscape)
    and (-webkit-min-device-pixel-ratio: 2){
       // CSS HERE
}

// For Portrait
@media only screen
    and (min-device-width: 768px)
    and (max-device-width: 2732px)
    and (orientation:portrait)
    and (-webkit-min-device-pixel-ratio: 2){
       // CSS HERE
}

iPad Pro 12.9媒体查询无效

1 个答案: