移動端橫屏轉豎屏的js獲取寬高和jq獲取寬高的區別

在作微信端時，須要判斷手機是橫屏仍是豎屏。一個一套樣式。

因此須要 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

此次獲取的是： 豎屏--->橫屏（獲取的是橫屏的寬高度）--->豎屏（獲取的是豎屏的寬高度）　。

 

最重要的是按照本身的項目來選擇怎麼獲取。。。畢竟需求不一樣