Question

我正在尝试让移动浏览器（iOS Safari）根据iOS设备的宽高比加载具有不同的全屏精确像素尺寸图像（.bg标签）的网页。

由于某种原因，每次我尝试在iPhone X上加载页面（其屏幕为2436x1125相当长，因此在下面的第三个条件中绝对大于19/9的比率）时，它默认为中间选项，即16/9选项...

每个图像都与宽高比完全相同，因此应该完全填满屏幕，尽管由于某种原因当前中间条件（为16/9而不是19/9）正在裁剪我的长iPhone X的侧面。（右键单击/检查以查看边框）

body, html {
    height: 100%; margin:0;padding:0;
    width:100%;
}

.bg { 
    /* The image used */
    background-image: url("640p.png");

    /* Full height */
    height: 100%;  width:100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (min-aspect-ratio: 1136/640) {
    .bg { 
    background-image: url("640p.png"); height: 100%;  width:100%;
    }
}

@media (min-aspect-ratio: 16/9) and (max-aspect-ratio: 2/1) {
    .bg { 
    background-image: url("1080p.png"); height: 100%;  width:100%;
    }
}

@media (min-aspect-ratio: 19/9) {
    .bg { 
    background-image: url("1125p.png"); height: 100%;  width:100%;
    }
}

<html><body>

<div class="bg"></div>

</body>
</html>

CSS-确切的移动宽高比的条件

0 个答案: