响应式媒体查询仅在调整窗口时加载

Question

我有一个使用Avada网站生成器插件的wordpress网站，但有一个自定义模板和自定义CSS文件。

我有bootstrap 4.6加载到网站以及。引导响应查询正常运行，但我的自定义CSS查询有一些问题。例子——

.image-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
@include media-breakpoint-down(md) {
width: 100%;
height: 1620px;
position: absolute;
}
&.desktop-bg {
@include media-breakpoint-down(md) {
display: none;
}
}
&.mobile-bg {
@include media-breakpoint-up(lg) {
display: none;
}
}
}

这是我的SASS文件，CSS输出为-

@media (max-width: 979.98px) {
.image-bg {
width: 100%;
height: 1620px;
position: absolute;
}
}
@media (max-width: 979.98px) {
.image-bg.desktop-bg {
display: none;
}
}
@media (min-width: 980px) {
.image-bg.mobile-bg {
display: none;
}
}

当我在移动iOS Safari或Chrome上查看页面时，这些CSS规则无法加载。然而，引导网格的CSS规则(例如coll -lg-4)可以正确加载。

当我在Firefox上查看页面时，如果我将检查和查看作为一个预定义的选项，例如"iPhone 12/13"我的背景CSS没有加载。但是，当我手动更改窗口的宽度时，CSS会正确加载。

Answer 1

我必须加载这行代码-

<meta name="viewport" content="width=device-width, initial-scale=1">

现在工作正常