JQuery判断浏览器可视区域

在CSS中我们经常使用@media screen来查询设备宽度,其实JQuery也可以实现这个功能,但是我不建议大家使用JQuery来实现,不过有的时候做前端又必须要使用这个方法来判断可视区域,下面我们一起来复习下JQuery的相关知识。我们可以使用.width()以及.height()方法来获取相关元素或者窗口的宽高。

$(window).width(); //浏览器时下窗口可视区域宽度
$(window).height(); //浏览器时下窗口可视区域高度
$(document).height(); //浏览器时下窗口文档的高度
$(document.body).height();//浏览器时下窗口文档body的高度
$(document.body).outerHeight(true);//浏览器时下窗口文档body的总高度 包括border padding margin
$(document).width();//浏览器时下窗口文档对于象宽度
$(document.body).width();//浏览器时下窗口文档body的高度
$(document.body).outerWidth(true);//浏览器时下窗口文档body的总宽度 包括border padding margin

复习了上面的知识,我们就可以判断当前body可是区域的宽度是否小于768、480等,代码如下

if(document.body.clientWidth<768){
    alert('可视区域小于768px');
}
if(document.body.clientWidth<480){
    alert('可视区域小于480px');
}

这样必须要刷新页面才能弹出提示信息,并不能实时对浏览器大小进行监听,因此我们必须使用$(window).resize()方法,代码如下:

//实时监听窗口改变
$(window).resize(function() {
  if(document.body.clientWidth<768){
    alert('可视区域小于768px');
  }
  if(document.body.clientWidth<480){
    alert('可视区域小于480px');
  }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注