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

Question

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

以下查询适用于除 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 第 3 代。附上 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)  {}