Question

我想知道在Chrome浏览器中查看设备模式中的页面时是否有其他人与background-size: cover存在不一致。有时，通过拉伸背景图像以填充设备视口的背景来正确显示，有时背景延伸到视口之外（如果它是一个更大的图像），您必须触摸并滚动到查看图像的其余部分。

显然第一种方法是正确的，但无论是否选择遵守规则，它似乎随机变化。这只是我还是我的代码？我使用基于min / max-height的媒体查询。尝试多次启动您自己的示例，并告诉我它是否始终正确或不一致。

只是一个放大图像的示例，我在设备规格设置为480x800 1.5dppx时运行：

#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

@media 
    only screen and (min-height: 800px) and (-webkit-min-device-pixel-ratio: 1.33) and (-webkit-max-device-pixel-ratio: 1.99),
    only screen and (min-height: 800px) and (min-resolution: 128dpi) and (max-resolution: 191dpi) {
    #container {
        background-image: url(v01_1920.jpg);
    }
}

有时它会将图像缩小到容器/视口。其他时候它根本不会缩小。我想知道它是否是UA字符串的问题，但我几乎可以肯定所有被模拟的设备都会理解这两个媒体查询中的一个。

background-size的buggy行为：在DevTools设备模式下覆盖

0 个答案: