這篇文章主要介紹了html5中橫豎屏檢測的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們擁有十余年網(wǎng)頁設(shè)計和網(wǎng)站建設(shè)經(jīng)驗，從網(wǎng)站策劃到網(wǎng)站制作，我們的網(wǎng)頁設(shè)計師為您提供的解決方案。為企業(yè)提供網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、微信開發(fā)、小程序設(shè)計、手機網(wǎng)站制作設(shè)計、成都h5網(wǎng)站建設(shè)、等業(yè)務(wù)。無論您有什么樣的網(wǎng)站設(shè)計或者設(shè)計方案要求，我們都將富于創(chuàng)造性的提供專業(yè)設(shè)計服務(wù)并滿足您的需求。

方案一：

// 監(jiān)聽 orientation changes
window.addEventListener("orientationchange", function(event) {
 // 根據(jù)event.orientation|screen.orientation.angle等于0|180、90|-90度來判斷橫豎屏
}, false);

代碼添加上后，就各種兼容性問題。這里兼容性問題出現(xiàn)在兩個地方：

orientationchange

event.orientation|screen.orientation.angle

如下是orientationchange事件的兼容性：

如下是screen.orientation的兼容性：

方案二：

上述方案不行，只能另行他法了。google一下，了解到可以通過resize配合(window.inner/outerWidth, window.inner/outerHeight)來實現(xiàn)：

window.addEventListener("resize", function(event) {
var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
if(oritentation === 'portrait'){
// do something ……
} else {
// do something else ……
}
}, false);

這種方案基本滿足大部分項目的需求，但是還是有些不足之處：

只要window的size變化，就會不斷觸發(fā)觸發(fā)resize事件?？梢允褂胹etTimeout來優(yōu)化一下

如果有多個地方需要監(jiān)聽橫豎屏，就需要注冊多個window.addEventListener("resize", function(event) {……})。能不能通過訂閱與發(fā)布模式來改進一下，只注冊一個resize負(fù)責(zé)監(jiān)聽橫豎屏變化，只要橫豎發(fā)生變化就發(fā)布通知訂閱的對象。其他需要監(jiān)聽橫豎屏的地方只需訂閱一下即可。

關(guān)鍵代碼如下：

var resizeCB = function(){
   if(win.innerWidth > win.innerHeight){//初始化判斷
    meta.init = 'landscape';
    meta.current = 'landscape';
   } else {
    meta.init = 'portrait';
    meta.current = 'portrait';
   }
   return function(){
    if(win.innerWidth > win.innerHeight){
     if(meta.current !== 'landscape'){
      meta.current = 'landscape';
      event.trigger('__orientationChange__', meta);
     }
    } else {
     if(meta.current !== 'portrait'){
      meta.current = 'portrait';
      event.trigger('__orientationChange__', meta);
     }
    }
   }
  }();

完整代碼猛擊這里

方案三：

不過個人覺得通過window.innerWidth > window.innerHeight來實現(xiàn)的是一種偽檢測，有點不可靠。 可不可以通過瀏覽器來實現(xiàn)檢測？如基于CSS3@media媒體查詢來實現(xiàn)。

如下@media兼容性：

如上上圖所示，移動端瀏覽器都支持CSS3 media。

實現(xiàn)思路：

創(chuàng)建包含標(biāo)識橫豎屏狀態(tài)的特定css樣式

通過JS向頁面中注入CSS代碼

resize回調(diào)函數(shù)中獲取橫豎屏的狀態(tài)

這里我選擇的節(jié)點font-family作為檢測樣式屬性。理由如下：

選擇主要為了避免reflow和repaint

選擇font-family樣式，主要是因為font-family有如下特性：

• 優(yōu)先使用排在前面的字體。

• 如果找不到該種字體，或者該種字體不包括所要渲染的文字，則使用下一種字體。

• 如果所列出的字體，都無法滿足需要，則讓操作系統(tǒng)自行決定使用哪種字體。

這樣我們就可以指定特定標(biāo)識來標(biāo)識橫豎屏的狀態(tài)，不過需要將指定的標(biāo)識放置在其他字體的前面，這樣就不會引起hmtl字體的變化。

關(guān)鍵代碼如下：

// callback
  var resizeCB = function() {
    var hstyle = win.getComputedStyle(html, null),
      ffstr = hstyle['font-family'],
      pstr = "portrait, " + ffstr,
      lstr = "landscape, " + ffstr,
      // 拼接css
      cssstr = '@media (orientation: portrait) { .orientation{font-family:' + pstr + ';} } @media (orientation: landscape) { .orientation{font-family:' + lstr + ';}}';
    // 載入樣式    
    loadStyleString(cssstr);
    // 添加類
    html.className = 'orientation' + html.className;
    if (hstyle['font-family'] === pstr) { //初始化判斷
      meta.init = 'portrait';
      meta.current = 'portrait';
    } else {
      meta.init = 'landscape';
      meta.current = 'landscape';
    }
    return function() {
      if (hstyle['font-family'] === pstr) {
        if (meta.current !== 'portrait') {
          meta.current = 'portrait';
          event.trigger('__orientationChange__', meta);
        }
      } else {
        if (meta.current !== 'landscape') {
          meta.current = 'landscape';
          event.trigger('__orientationChange__', meta);
        }
      }
    }
  }();

完整代碼猛擊這里

測試效果

portrait效果：

landscape效果：

方案四：

可以再改進一下，在支持orientationchange時，就使用原生的orientationchange，不支持則使用方案三。

關(guān)鍵代碼如下：

// 是否支持orientationchange事件
var isOrientation = ('orientation' in window && 'onorientationchange' in window);
// callback
var orientationCB = function(e) {
  if (win.orientation === 180 || win.orientation === 0) {
    meta.init = 'portrait';
    meta.current = 'portrait';
  }
  if (win.orientation === 90 || win.orientation === -90) {
    meta.init = 'landscape';
    meta.current = 'landscape';
  }
  return function() {
    if (win.orientation === 180 || win.orientation === 0) {
      meta.current = 'portrait';
    }
    if (win.orientation === 90 || win.orientation === -90) {
      meta.current = 'landscape';
    }
    event.trigger(eventType, meta);
  }
};
var callback = isOrientation ? orientationCB() : (function() {
  resizeCB();
  return function() {
    timer && win.clearTimeout(timer);
    timer = win.setTimeout(resizeCB, 300);
  }
})();
// 監(jiān)聽
win.addEventListener(isOrientation ? eventType : 'resize', callback, false);

完整代碼猛擊這里

方案五：

目前，上述幾種方案都是通過自定制的訂閱與發(fā)布事件模式來實現(xiàn)的。這里可以基于瀏覽器的事件機制，來模擬orientationchange。即對orientationchange的不兼容進行修復(fù)。

關(guān)鍵代碼如下：

var eventType = 'orientationchange';
// 觸發(fā)原生orientationchange
var fire = function() {
  var e;
  if (document.createEvent) {
    e = document.createEvent('HTMLEvents');
    e.initEvent(eventType, true, false);
    win.dispatchEvent(e);
  } else {
    e = document.createEventObject();
    e.eventType = eventType;
    if (win[eventType]) {
      win[eventType]();
    } else if (win['on' + eventType]) {
      win['on' + eventType]();
    } else {
      win.fireEvent(eventType, e);
    }
  }
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“html5中橫豎屏檢測的方法”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

本文名稱：html5中橫豎屏檢測的方法-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://weahome.cn/article/dpdsdd.html