iPad Pro 12.9第三代的CSS媒体查询

Question

我正在尝试检测上述设备并相应调整Web内容的大小。

以下查询适用于除12.9英寸第三代以外的所有iPad Pro设备。有人知道正确的宽度/高度参数吗？

/* iPad pro */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
{
}

我现在按照建议尝试了以下代码。它仍然仅在第三代iPad Pro 12.9上不起作用。随附iPad模拟器的屏幕截图。登录部分应填满屏幕宽度

/* Landscape*/
@media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)
{
    div.information
    {
        width:1290px;
        padding-left:20px;
        padding-right:20px;
        padding-top:5px;
        padding-bottom:5px;
        border-radius: 20px;
        margin-bottom:10px;
    }
}

/* Portrait*/
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)
{
    div.information
    {
        width:950px;
        padding-left:20px;
        padding-right:20px;
        padding-top:5px;
        padding-bottom:5px;
        border-radius: 20px;
        margin-bottom:10px;
    }
}

Answer 1

以下查询适用于您。我在声明中添加了定向问题，以指定您握持iPad的方式。另外，您无需使用2个宽度值，而需要将最大值替换为高度值（高度会根据您以横向还是纵向方式握住设备而改变。

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

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