Question

我的目标是在浏览器宽度小于500px时阻止js加载元素。基本上，我不希望它在大多数移动设备上加载。

var mq = window.matchMedia( "(max-width: 500px)" );
    if (mq.matches) {
       // Don't load function //
    }

    else {
       // Load function //
    }

看起来很简单，当我在笔记本电脑上试用它时，效果非常好。超过500px且js加载。低于或等于500px时，它不会加载。

但是，在我的手机上，由于功能加载，我的js媒体查询无法正常工作。有人建议它可能与我的元标记有关。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>

我不确定我做错了什么，但我似乎无法将移动浏览器的宽度成功转发到javascript。非常感谢任何帮助。

Answer 1

对于移动浏览器，您可以使用max-width: 500px媒体查询获得时髦的结果，因为移动设备屏幕中的像素密度较高。您最好的选择是使用device媒体查询，例如max-device-width。所以在你的情况下它看起来像这样：

var mq = window.matchMedia("(max-device-width: 500px)");
if (mq.matches) {
   // Don't load function //
}

else {
   // Load function //
}

Javascript和移动浏览器宽度问题

1 个答案: