Question

我正在开发一个响应式网站，只有当您使用PC访问该网站时才会显示视频，但如果您使用的是手机，则会隐藏该视频。我已经设置了一个适用于大多数移动设备的查询（我们可以说它适用于每个移动设备）。我用iPhone 5s / 6s，三星S4 mini进行了检查，它完美运行（使用Safari / Internet / Chrome）。当我尝试使用三星S5时，它无法在Chrome上运行。问题是：为什么查询无法在Chrome上运行？也许这是三星s5屏幕的大小？如果您想查看该网站是http://objectfilms.altervista.org/

屏幕较小的移动设备的代码如下：

/* video background nascosto su Mobile phone */
@media only screen and (min-device-width : 200px) and (max-device-width : 720px) {
    .video-div { 
        visibility: hide;
        display: none;
    }
}

适用于Samsung S5的代码如下：

/* video background nascosto su Samsung S5 */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
    .video-div { 
        visibility: hide;
        display: none;
    }
}

我该怎么办？

Answer 1

S5的分辨率为1080 x 1920，那些是设备像素，所以我认为你必须查询那些值，比如

@media screen and (device-width: 1080px) and (device-height: 1920px) and (-webkit-device-pixel-ratio: 3) { ...

...或使用常规像素值，但不能用作设备像素：

@media screen and (width: 360px) and (height: 640px) and (-webkit-device-pixel-ratio: 3) { ...

Css媒体查询无法在Chrome上使用Samsung S5

1 个答案: