如何使用javascript检查视口是否小于一定的宽度
How to check if viewport is smaller than a certain width using javascript?
我想有一个简单的语句来设置一个变量bool为false或true。当viewport小于768px时,isMobile应该设置为true,大于768px时,isMobile应该设置为false。
我不知道为什么下面的代码什么都不做。控制台日志中也没有错误。
var w = $(window).width();
var isMobile = false;
function resizer() {
if (w < 768) {
console.log("resize");
isMobile = true;
} else {
isMobile = false;
}
}
$(window).resize(function() {
resizer();
});
因为你不会在每次调整尺寸时都测量宽度。试试这样:
var isMobile = false;
function resizer() {
var w = $(window).width();
if (w < 768) {
console.log("resize");
isMobile = true;
} else {
isMobile = false;
}
}
$(window).on('load resize', function(){
resizer();
});
将var w = $(window).width();
移到resizer()
中。这将得到window
的电流尺寸的值。
请参阅代码中的内联注释。
var isMobile = false;
function resizer() {
var w = $(window).width();
// Move this inside resize handler
if (w < 768) {
console.log("resize");
isMobile = true;
} else {
isMobile = false;
}
}
$(window).resize(function() {
resizer();
}).trigger('resize');
// ^^^^^^^^^^^^^^^^^^
//
// Trigger event on page load
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 如何检测是否有溢出
- jQuery中是否内置了任何字符串格式化函数
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 测试索引值是否等于某个数字的倍数
- Fancybox是否将Click事件静音
- 主干-不管怎样,检查事件以前是否绑定过
- YUI3 IO实用程序是否可以根据给定的内容类型标头值自动序列化数据
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 节点是否需要模块传递带有方括号的arg?这是个错误吗
- 如何在ajax中检查密码是否小于8个字符
- 检查开始日期是否小于结束日期(不使用任何pluguin)
- 检查时差是否小于45分钟,以及时间是否超过当前时间-AngularJS
- 如何使用angularjs检查所选日期和时间是否小于当前日期或大于当前日期和时间
- 检查时间差是否小于45分钟,并运行功能-AngularJS
- 如何检查数组下的值是否存在且差值小于0.000002
- 如何使用javascript检查视口是否小于一定的宽度
- 找出值是否大于或小于Javascript之前的值
- 检查javascript中的年龄是否不小于13年