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

。

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

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

使用瀏覽器自帶事件orientationchange和瀏覽器對象window.orientation能夠完美進行橫豎屏幕切換。依據(jù)參考資料一，此事件在有些瀏覽器中使用綁定在body元素上的屬性來實現(xiàn)，僅僅有在頁面發(fā)生css重排后才會被觸發(fā)。解決此問題的方法是在body上添加一個css類。用來觸發(fā)css的重排，詳細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）

媒體查詢里面中有橫豎屏幕的檢測。orientation: portrait(豎)/landscape(橫)，媒體查詢該屬性的生效系統(tǒng)版本號為：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、使用定時器。定期檢測當前頁面的長寬

此種方法通過定時檢測當前頁面的長寬。通過對照長寬，對其進行推斷，依據(jù)推斷結(jié)果模擬頁面的橫豎屏。此方法性能堪憂。主要用于以上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、橫屏終結(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è)移動端全部瀏覽器都失效，請檢查手機屏幕旋轉(zhuǎn)是否開啟；2、假設(shè)僅僅有微信旋轉(zhuǎn)失效。而在瀏覽器中打開正常，請打開微信的【開啟橫屏模式】；3、假設(shè)以上兩條都無法解決。請檢查人品。

5、參考資料

國外大神移動端研究

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

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

總結(jié)

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

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