[英]How to check if viewport is smaller than a certain width using javascript?
I want to have a simple statement to set a variable bool to false or true. 我想要一个简单的语句来将变量bool设置为false或true。 isMobile should be set to true when the viewport is smaller then 768px and above this amount it should be set to false.
当视口小于768px时,isMobile应该设置为true,并且在此数量以上时,应该将其设置为false。
I don't know why the following code does nothing. 我不知道为什么下面的代码什么都不做。 Also there is no error in the console log.
控制台日志中也没有错误。
var w = $(window).width();
var isMobile = false;
function resizer() {
if (w < 768) {
console.log("resize");
isMobile = true;
} else {
isMobile = false;
}
}
$(window).resize(function() {
resizer();
});
Because you don't measure the width on every resize. 因为您不必在每次调整大小时都测量宽度。 Try this way:
尝试这种方式:
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();
});
Move var w = $(window).width();
移动
var w = $(window).width();
inside resizer()
. 内部
resizer()
。 This will get the value of current dimensions of window
. 这将获取
window
当前尺寸的值。
See the comments inline in the code. 请参阅代码中的内联注释。
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.