Javascript 和移动浏览器宽度问题答案

【问题标题】：Javascript and mobile browser width issuesJavascript 和移动浏览器宽度问题
【发布时间】：2015-01-20 08:55:43
【问题描述】：

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

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

    else {
       // Load function //
    }

它看起来很简单，当我在笔记本电脑上试用时，它运行良好。在超过 500px 和 js 加载。在小于或等于 500 像素时，它不会加载。

但是，在我的手机上，我的 js 媒体查询不起作用，因为该函数已加载。有人建议这可能与我的元标记有关。

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

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

【问题讨论】：

您是否尝试过使用if($(window).width() > 500)？
我确实试过了。我也尝试过 .innerWidth 和 document.documentElement.clientWidth，但它们都不适用于移动设备。一切都适用于桌面，但在我的 Nexus 5 上，它从不执行任何操作。
您的屏幕是否可能大于 500 像素？ $(window).width(); 说它是什么尺寸？
好吧，我的分辨率是两倍大小，但浏览器窗口的宽度肯定是 360。这个网站告诉你视口大小的尺寸：ryanve.com/lab/dimensions，这就是我的基础这个数字。
好的，然后尝试使用min-device-width 而不是max-width。 javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

标签： javascript jquery jquery-mobile media-queries

【解决方案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 //
}

【讨论】：