更靠譜的移動(dòng)端橫豎屏檢測(cè)方法
前不久，做了一個(gè)H5項(xiàng)目，需要在橫豎屏變化時(shí)，做一些處理。毫無(wú)疑問(wèn)，需要使用orientationchange來(lái)監(jiān)聽(tīng)橫豎屏的變化。
方案一：
- // 監(jiān)聽(tīng) orientation changes
- window.addEventListener("orientationchange", function(event) {
- // 根據(jù)event.orientation|screen.orientation.angle等于0|180、90|-90度來(lái)判斷橫豎屏
- }, false);
代碼添加上后，就各種兼容性問(wèn)題。這里兼容性問(wèn)題出現(xiàn)在兩個(gè)地方：
- orientationchange
- event.orientation|screen.orientation.angle
如下是orientationchange事件的兼容性：
如下是screen.orientation的兼容性：
方案二：
上述方案不行，只能另行他法了。google一下，了解到可以通過(guò)resize配合(window.inner/outerWidth, window.inner/outerHeight)來(lái)實(shí)現(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);
這種方案基本滿足大部分項(xiàng)目的需求，但是還是有些不足之處：
- 只要window的size變化，就會(huì)不斷觸發(fā)觸發(fā)resize事件。可以使用setTimeout來(lái)優(yōu)化一下
- 如果有多個(gè)地方需要監(jiān)聽(tīng)橫豎屏，就需要注冊(cè)多個(gè)window.addEventListener("resize", function(event) {……})。能不能通過(guò)訂閱與發(fā)布模式來(lái)改進(jìn)一下，只注冊(cè)一個(gè)resize負(fù)責(zé)監(jiān)聽(tīng)橫豎屏變化，只要橫豎發(fā)生變化就發(fā)布通知訂閱的對(duì)象。其他需要監(jiān)聽(tīng)橫豎屏的地方只需訂閱一下即可。
關(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);
- }
- }
- }
- }();
方案三：
不過(guò)個(gè)人覺(jué)得通過(guò)window.innerWidth > window.innerHeight來(lái)實(shí)現(xiàn)的是一種偽檢測(cè)，有點(diǎn)不可靠。 可不可以通過(guò)瀏覽器來(lái)實(shí)現(xiàn)檢測(cè)?如基于CSS3@media媒體查詢來(lái)實(shí)現(xiàn)。
如下@media兼容性：
如上上圖所示，移動(dòng)端瀏覽器都支持CSS3 media。
實(shí)現(xiàn)思路：
- 創(chuàng)建包含標(biāo)識(shí)橫豎屏狀態(tài)的特定css樣式
- 通過(guò)JS向頁(yè)面中注入CSS代碼
- resize回調(diào)函數(shù)中獲取橫豎屏的狀態(tài)
這里我選擇<html></html>的節(jié)點(diǎn)font-family作為檢測(cè)樣式屬性。理由如下：
- 選擇<html></html>主要為了避免reflow和repaint
- 選擇font-family樣式，主要是因?yàn)閒ont-family有如下特性：
1.優(yōu)先使用排在前面的字體。
2.如果找不到該種字體，或者該種字體不包括所要渲染的文字，則使用下一種字體。
3.如果所列出的字體，都無(wú)法滿足需要，則讓操作系統(tǒng)自行決定使用哪種字體。
這樣我們就可以指定特定標(biāo)識(shí)來(lái)標(biāo)識(shí)橫豎屏的狀態(tài)，不過(guò)需要將指定的標(biāo)識(shí)放置在其他字體的前面，這樣就不會(huì)引起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);
- }
- }
- }
- }();
測(cè)試效果
- portrait效果：
- landscape效果：
方案四：
可以再改進(jìn)一下，在支持orientationchange時(shí)，就使用原生的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)聽(tīng)
- win.addEventListener(isOrientation ? eventType : 'resize', callback, false);
方案五：
目前，上述幾種方案都是通過(guò)自定制的訂閱與發(fā)布事件模式來(lái)實(shí)現(xiàn)的。這里可以基于瀏覽器的事件機(jī)制，來(lái)模擬orientationchange。即對(duì)orientationchange的不兼容進(jìn)行修復(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);
- }
- }
- }
通過(guò)上述5種方案，自己對(duì)移動(dòng)端橫豎屏檢測(cè)有了更進(jìn)一步的認(rèn)識(shí)，有些東西只有自己親身經(jīng)歷過(guò)才知道為什么要這么寫，自己也把其中緣由記錄在文章中，希望對(duì)大家有幫助。經(jīng)過(guò)5種方案的演變得到了最終orientationchange-fix，github地址：https://github.com/zhansingsong/orientationchange-fix
