移动端横屏转竖屏的js获取宽高和jq获取宽高的区别

最新推荐文章于 2021-06-17 18:08:46 发布

转载最新推荐文章于 2021-06-17 18:08:46 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xf-zhao/p/8551021.html

文章标签：

#javascript #ViewUI

本文探讨了在微信端开发中如何正确检测手机横竖屏状态的方法。通过对比多种获取屏幕尺寸的技术，指出了使用jQuery获取窗口高度和宽度的方案能够准确反映屏幕方向的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做微信端时，需要判断手机是横屏还是竖屏。一个一套样式。

所以需要 js ‘onorientationchange’ 事件，判断一下。

这次我说的是竖屏转横屏获取的 window.screen.width/height 。

假设手机宽度是 360，高度 760

如果我们直接 alert(window.screen.width)。弹出的是 360。但是我们横屏了，弹出的还是360。按照正常显示这次弹出的应该是760。但是我们从横屏 ---> 竖屏。 alert弹出的是 760 。这就不正常了。

按照我的判断，手机横屏了但是 window.screen 还是获取最后一次竖屏的宽高度。这不符合项目中的要求。后来我测试js各个的

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

都是竖屏---> 横屏（获取的是竖屏的宽高度） ----> 竖屏（获取的横屏的宽高度）;

解决方法：

用jq获取。

alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

这次获取的是：竖屏--->横屏（获取的是横屏的宽高度）--->竖屏（获取的是竖屏的宽高度）　。

最重要的是按照自己的项目来选择怎么获取。。。毕竟需求不同

转载于:https://www.cnblogs.com/xf-zhao/p/8551021.html