在移动设备上启用CSS视差

Question

我的CSS视差在移动浏览器上无法正常工作（三星S10上为Chrome）。

这是我设置的代码。在下面的媒体查询中也使用了此方法，我将保存两次代码发布。

@media only screen and (max-width: 768px)

.parallax {
    display: flex; 
    /* Set a specific height */
    height: 950px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallaxBottom {
    display: flex; 
    /* Set a specific height */
    height: 750px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.paralBackground {
    background: rgb(240, 238, 235);
    background: linear-gradient(0deg, rgb(240, 238, 235) 0%, rgb(226, 225, 225) 100%);
    height: 90vh !important;
}

这是否会被移动浏览器阻止？

Answer 1

实际上，我更改了媒体查询并将其更改为

@media only screen and (max-device-width: 480px)