A more reliable method of screen detection

Not long ago, did a H5 project, need to do some processing when the screen changes. There is no doubt that you need to use orientationchange to monitor changes in the screen.

Programme One:

// Monitor Orientation Changes function (event) {    //  according to Event.orientation|screen.orientation.angle equals 0|180, 90|-90 degree to judge the screen  false);

After the code is added, there are various compatibility issues. Here a compatibility problem arises in two places:

• Orientationchange
• Event.orientation|screen.orientation.angle

The following is the compatibility of the orientationchange event:

The following are the compatibility of screen.orientation :

Scenario Two:

The above scheme is not possible, but he can only act separately. Google, understand that can be achieved through resize (window.inner/outerwidth, window.inner/outerheight) to achieve:

function (event) {var orientation= (window.innerwidth > Window.innerheight)? "Landscape": "Portrait"; if (oritentation = = = ' Portrait ') {// do something ... Else {// do something else ...  false);

This approach basically satisfies the needs of most projects, but there are some shortcomings:

• As long as the size of the window changes, the triggering resize event is constantly triggered. You can use setTimeout to optimize
• If there are multiple places to monitor the screen, you need to register multiple window.addeventlistener ("Resize", function (event) {...}). Can be improved by subscription and release mode , only register a resize is responsible for monitoring the changes in the screen, as long as the changes in the order to publish the notification subscription object. Other places that need to listen to the screen can just subscribe.

The key code is as follows:

    varRESIZECB =function(){      if(Win.innerwidth > Win.innerheight) {//Initialize JudgmentMeta.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); }        }      }    }();

Full Code bash here

Programme III:

But personally feel that through window.innerwidth > Window.innerheight to achieve is a pseudo-detection, a bit unreliable. Is it possible to detect through a browser? such as based on CSS3@media Media query to achieve.

@media compatibility as follows:

As shown above, the mobile browser supports CSS3 media.

Implementation ideas:

• Create a specific CSS style that contains the status of the screen
• Inject CSS code into the page via JS
• Resize callback function to get the status of the screen

Here I select node font-family as the detection style property. The reasons are as follows:

• Select mainly to avoid reflow and repaint
• Choose the font-family style, mainly because the font-family has the following features:
• First use the font in front.
• If you cannot find the font, or if the font does not include the text you want to render, use the next font.
• If the fonts listed do not meet your needs, let the operating system decide which font to use in its own way.

This allows us to specify a specific identity to identify the state of the screen, but the specified identity needs to be placed in front of other fonts, so that no changes to the HMTL font are caused.

The key code is as follows:

    //Callback    varRESIZECB =function() {        varHstyle = Win.getcomputedstyle (HTML,NULL), Ffstr= hstyle[' font-family '], Pstr= "Portrait," +Ffstr, Lstr= "Landscape," +Ffstr,//Stitching CSSCssstr = ' @media (orientation:portrait) {. orientation{font-family: ' + Pstr + ';}} @media (Orientation:landscape) {. o rientation{font-family: ' + Lstr + ';} '; //Load Styleloadstylestring (CSSSTR); //Add ClassHtml.classname = ' Orientation ' +Html.classname; if(hstyle[' font-family ') = = = Pstr) {//Initialize JudgmentMeta.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); }            }        }    }();

Full Code bash here

Test effect

• Portrait effect:

• Landscape Effect:

Programme IV:

Can be improved again, when supporting Orientationchange , the use of the native Orientationchange, not support the use of scenario three .

The key code is as follows:

//whether the Orientationchange event is supportedvarIsorientation = (' Orientation 'inchWindow && ' Onorientationchange 'inchwindow);//CallbackvarORIENTATIONCB =function(e) {if(win.orientation = = | | | win.orientation = = 0) {Meta.init= ' Portrait '; Meta.current= ' Portrait '; }    if(win.orientation = = = | | win.orientation = =-90) {Meta.init= ' Landscape '; Meta.current= ' Landscape '; }    return function() {        if(win.orientation = = | | | win.orientation = = 0) {meta.current= ' Portrait '; }        if(win.orientation = = = | | win.orientation = =-90) {meta.current= ' Landscape ';    } event.trigger (EventType, Meta); }};varcallback = Isorientation? ORIENTATIONCB (): (function() {RESIZECB (); return function() {Timer&&win.cleartimeout (timer); Timer= Win.settimeout (RESIZECB, 300); }})();//MonitorWin.addeventlistener (isorientation eventtype: ' Resize ', callback,false);

Full Code bash here

Programme V:

At present, several of these schemes are implemented by customizing the subscription and release event patterns. This allows you to simulate Orientationchangebased on the browser's event mechanism. That is, the incompatibility of the orientationchange is fixed.

The key code is as follows:

varEventType = ' Orientationchange ';//Trigger native OrientationchangevarFire =function() {    vare; 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); }    }}

Full Code bash here

Through the above 5 kinds of programs, their mobile end of the screen detection has a further understanding, some things only have their own experience to know why to write so, their reasons are recorded in the article, I hope to help you. After the evolution of 5 options, the final Orientationchange-fix, GitHub address: Https://github.com/zhansingsong/orientationchange-fix

A more reliable method of screen detection