移動端html開展。我們經常用來推斷橫豎屏做一些事情。例如，在播放視頻時，切經常使用橫豎屏切換到中心和全屏顯示，假設你無數次的嘗試都失敗了，請參閱最后，哦，有驚喜。！

。

一般來說，橫豎屏的檢測方式有下面幾種：

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

使用瀏覽器自帶事件orientationchange和瀏覽器對象window.orientation能夠完美進行橫豎屏幕切換。依據參考資料一，此事件在有些瀏覽器中使用綁定在body元素上的屬性來實現，僅僅有在頁面發生css重排后才會被觸發。解決此問題的方法是在body上添加一個css類。用來觸發css的重排，詳細css代碼例如以下：

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

調用事件代碼例如以下：

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）

媒體查詢里面中有橫豎屏幕的檢測。orientation: portrait(豎)/landscape(橫)，媒體查詢該屬性的生效系統版本號為：iOS 3.2+, Android 2.0+和一些其它瀏覽器。

詳細代碼例如以下：

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

3、使用定時器。定期檢測當前頁面的長寬

此種方法通過定時檢測當前頁面的長寬。通過對照長寬，對其進行推斷，依據推斷結果模擬頁面的橫豎屏。此方法性能堪憂。主要用于以上1,2均不支持的瀏覽器或者手機。廢話少說。上代碼。

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、橫屏終結版

綜上。產生了橫屏終結版。

代碼例如以下：

(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、假設移動端全部瀏覽器都失效，請檢查手機屏幕旋轉是否開啟；2、假設僅僅有微信旋轉失效。而在瀏覽器中打開正常，請打開微信的【開啟橫屏模式】；3、假設以上兩條都無法解決。請檢查人品。

5、參考資料

國外大神移動端研究

很多其它內容請查看zakwu的小站

版權聲明：本文博主原創文章，博客，未經同意不得轉載。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。