移動(dòng)端html開(kāi)展。我們經(jīng)常用來(lái)推斷橫豎屏做一些事情。例如，在播放視頻時(shí)，切經(jīng)常使用橫豎屏切換到中心和全屏顯示，假設(shè)你無(wú)數(shù)次的嘗試都失敗了，請(qǐng)參閱最后，哦，有驚喜。！

。

一般來(lái)說(shuō)，橫豎屏的檢測(cè)方式有下面幾種：

一、使用瀏覽器自帶的事件

使用瀏覽器自帶事件orientationchange和瀏覽器對(duì)象window.orientation能夠完美進(jìn)行橫豎屏幕切換。依據(jù)參考資料一，此事件在有些瀏覽器中使用綁定在body元素上的屬性來(lái)實(shí)現(xiàn)，僅僅有在頁(yè)面發(fā)生css重排后才會(huì)被觸發(fā)。解決此問(wèn)題的方法是在body上添加一個(gè)css類。用來(lái)觸發(fā)css的重排，詳細(xì)css代碼例如以下：

.portrait body div { width: 10%; } .landscape body div { width: 15%; }

調(diào)用事件代碼例如以下：

var updateOrientation = function() {var orientation = window.orientation;switch(orientation) {case 90: case -90:orientation = 'landscape';break;default:orientation = 'portrait';}// set the class on the HTML element (i.e. )document.body.parentNode.setAttribute('class', orientation);};// event triggered every 90 degrees of rotationwindow.addEventListener('orientationchange', updateOrientation, false);

2、使用媒體查詢（media query）

媒體查詢里面中有橫豎屏幕的檢測(cè)。orientation: portrait(豎)/landscape(橫)，媒體查詢?cè)搶傩缘纳到y(tǒng)版本號(hào)為：iOS 3.2+, Android 2.0+和一些其它瀏覽器。

詳細(xì)代碼例如以下：

@media all and (orientation: portrait) {body div { width: 10%; } }@media all and (orientation: landscape) {body div { width: 15%; } }

3、使用定時(shí)器。定期檢測(cè)當(dāng)前頁(yè)面的長(zhǎng)寬

此種方法通過(guò)定時(shí)檢測(cè)當(dāng)前頁(yè)面的長(zhǎng)寬。通過(guò)對(duì)照長(zhǎng)寬，對(duì)其進(jìn)行推斷，依據(jù)推斷結(jié)果模擬頁(yè)面的橫豎屏。此方法性能堪憂。主要用于以上1,2均不支持的瀏覽器或者手機(jī)。廢話少說(shuō)。上代碼。

var updateOrientation = function() {// landscape when width is biggest, otherwise portraitvar orientation = (window.innerWidth > window.innerHeight) ? 'landscape': 'portrait';// set the class on the HTML element (i.e. )document.body.parentNode.setAttribute('class', orientation);};// initialize the orientationupdateOrientation();// update every 5 secondssetInterval(updateOrientation, 5000);

4、橫屏終結(jié)版

綜上。產(chǎn)生了橫屏終結(jié)版。

代碼例如以下：

(function(){var supportsOrientation = (typeof window.orientation == 'number' && typeof window.onorientationchange == 'object');var HTMLNode = document.body.parentNode;var updateOrientation = function() {// rewrite the function depending on what's supportedif(supportsOrientation) {updateOrientation = function() {var orientation = window.orientation;switch(orientation) {case 90: case -90:orientation = 'landscape';break;default:orientation = 'portrait';}// set the class on the HTML element (i.e. )HTMLNode.setAttribute('class', orientation);}} else {updateOrientation = function() {// landscape when width is biggest, otherwise portraitvar orientation = (window.innerWidth > window.innerHeight) ?

'landscape': 'portrait'; // set the class on the HTML element (i.e. ) HTMLNode.setAttribute('class', orientation); } } updateOrientation(); } var init = function() { // initialize the orientation updateOrientation(); if(supportsOrientation) { window.addEventListener('orientationchange', updateOrientation, false); } else { // fallback: update every 5 seconds setInterval(updateOrientation, 5000); } } window.addEventListener('DOMContentLoaded', init, false); })();

溫馨提示: 1、假設(shè)移動(dòng)端全部瀏覽器都失效，請(qǐng)檢查手機(jī)屏幕旋轉(zhuǎn)是否開(kāi)啟；2、假設(shè)僅僅有微信旋轉(zhuǎn)失效。而在瀏覽器中打開(kāi)正常，請(qǐng)打開(kāi)微信的【開(kāi)啟橫屏模式】；3、假設(shè)以上兩條都無(wú)法解決。請(qǐng)檢查人品。

5、參考資料

國(guó)外大神移動(dòng)端研究

很多其它內(nèi)容請(qǐng)查看zakwu的小站

版權(quán)聲明：本文博主原創(chuàng)文章，博客，未經(jīng)同意不得轉(zhuǎn)載。

總結(jié)

以上是生活随笔為你收集整理的微通道横屏的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。