时间戳

首页 > 解决方案 > CSS - 精确移动纵横比的条件

ios - CSS - 精确移动纵横比的条件

问题描述

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

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

每个图像都与纵横比完全一致，因此应该完全填满屏幕，尽管由于某种原因，目前中间条件（用于 16/9 而不是 19/9）正在裁剪我的长 iPhone X 的侧面。（右键单击/inspect 查看边界）

图片来自 Gyazo

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>

标签： ioscssmobile-safari

解决方案

推荐阅读