首頁 > web前端 > H5教程 > 主體

H5橫豎螢幕偵測的方法

不言
發布: 2018-06-11 16:16:19
原創
2690 人瀏覽過

這篇文章主要為大家詳細介紹了更可靠的橫豎屏檢測方法,具有一定的參考價值,有興趣的小伙伴們可以參考一下

#前不久,做了一個H5項目,需要在橫豎屏變化時,做一些處理。毫無疑問,需要使用orientationchange來監聽橫豎螢幕的變化。

方案一:

// 监听 orientation changes
window.addEventListener("orientationchange", function(event) {
 // 根据event.orientation|screen.orientation.angle等于0|180、90|-90度来判断横竖屏
}, false);
登入後複製

程式碼新增上後,就各種相容性問題。這裡相容性問題出現在兩個地方:

orientationchange

event.orientation |screen.orientation.angle

如下是orientationchange事件的相容性:

##如下是screen .orientation的兼容性:

方案二:

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

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變化,就會不斷觸發觸發resize事件。可以使用setTimeout來優化一下

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

關鍵程式碼如下:

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來實現的是一種偽檢測,有點不可靠。可不可以透過瀏覽器來實現檢測?如基於CSS3@media媒體查詢來實現。

如下@media相容性:


如上圖所示,行動裝置瀏覽器都支援CSS3 media。

實現想法:

建立包含標識橫豎螢幕狀態的特定css樣式

透過JS向頁面中註入CSS代碼

resize回呼函數中取得橫豎屏的狀態

這裡我選擇的節點font-family作為偵測樣式屬性。

理由如下:

選擇主要為了避免reflow和repaint

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

  • 優先使用排在前面的字體。

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

  • 如果所列出的字體,都無法滿足需要,請讓作業系統自行決定使用哪種字體。

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

關鍵程式碼如下:

// 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,不支援則使用方案三。

關鍵程式碼如下:

// 是否支持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);
  }
})();
// 监听
win.addEventListener(isOrientation ? eventType : 'resize', callback, false);
登入後複製

完整程式碼猛擊這裡

#方案五:

目前,上述幾種方案都是透過自訂的訂閱與發布事件模式來實現的。這裡可以基於瀏覽器的事件機制,來模擬orientationchange。即對orientationchange的不相容進行修復。

關鍵程式碼如下:

var eventType = 'orientationchange';
// 触发原生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);
    }
  }
}
登入後複製
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

HTML5和jQuery實作搜尋智慧匹配的功能

如何在微信端html5頁面呼叫分享介面

以上是H5橫豎螢幕偵測的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板