Javascript 和移动浏览器宽度问题
Javascript and mobile browser width issues
我的目标是防止当浏览器宽度小于 500px 时 js 加载到元素上。基本上,我不希望它在大多数移动设备上加载。
var mq = window.matchMedia( "(max-width: 500px)" );
if (mq.matches) {
// Don't load function //
}
else {
// Load function //
}
这看起来很简单,当我在我的笔记本电脑上尝试时,它运行得很好。超过 500px 和 js 加载。小于或等于 500 像素时,不会加载。
但是,在我的 phone 上,我的 js 媒体查询不起作用,因为该函数已加载。有人建议这可能与我的元标记有关。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
我不确定我做错了什么,但我似乎无法成功将移动浏览器宽度中继到 javascript。非常感谢任何帮助。
对于移动浏览器,您可以通过使用 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 //
}
我的目标是防止当浏览器宽度小于 500px 时 js 加载到元素上。基本上,我不希望它在大多数移动设备上加载。
var mq = window.matchMedia( "(max-width: 500px)" );
if (mq.matches) {
// Don't load function //
}
else {
// Load function //
}
这看起来很简单,当我在我的笔记本电脑上尝试时,它运行得很好。超过 500px 和 js 加载。小于或等于 500 像素时,不会加载。
但是,在我的 phone 上,我的 js 媒体查询不起作用,因为该函数已加载。有人建议这可能与我的元标记有关。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
我不确定我做错了什么,但我似乎无法成功将移动浏览器宽度中继到 javascript。非常感谢任何帮助。
对于移动浏览器,您可以通过使用 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 //
}