css - 适用于 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;
    }
}

标签： cssipad

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)  {}