More reliable screen detection methods and reliable screen Detection Methods

More reliable screen detection methods and reliable screen Detection Methods

Not long ago, I made an H5 project and needed some processing when the screen was changed. There is no doubt that you need to useOrientationchangeTo listen for landscape changes.

 Solution 1:

// Listen to orientation changeswindow. addEventListener ("orientationchange", function (event) {// according to the event. orientation | screen. orientation. angle is equal to 0 | 180, 90 |-90 degrees to determine whether the screen is horizontal or vertical}, false );

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

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

The compatibility of the orientationchange event is as follows:

The compatibility of screen. orientation is as follows:

 

 

Solution 2:

The above scheme is not feasible. We can only do it separately. Google to learn how to useResizeCooperation(Window. inner/outerWidth, window. inner/outerHeight)To achieve:

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

This solution basically meets the needs of most projects, but there are still some shortcomings:

• As longWindowOfSizeChanges will be triggered continuouslyResizeEvent. AvailableSetTimeoutTo optimize
• You must register multipleWindow. addEventListener ("resize", function (event ){......}). Can I passSubscription and publishing modesTo improve, register only oneResizeMonitors the changes of the horizontal and vertical screens, and publishes the notification subscription object as long as the horizontal and vertical changes. You only need to subscribe to other areas where you want to monitor the screen.

The key code is as follows:

Var resizeCB = function () {if (win. innerWidth> win. innerHeight) {// initialize the 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 );}}}}();

Click here with the complete code

 

Solution 3:

However, I personally think thatWindow. innerWidth> window. innerHeightTo implement a pseudo-detection, which is a bit unreliable. Can the browser be used for detection? For example, based on CSS3@ MediaMedia query.

@ Media compatibility:

As shown above, mobile browsers support CSS3 media.

Implementation ideas:

• Create a specific css style that identifies the landscape and Landscape
• Inject CSS code to the page through JS
• The resize callback function obtains the status of the screen.

Here, I select the

• Select
• The font-family style is selected mainly because font-family has the following features:
• The front font is preferred.
• If the font cannot be found, or the Font does not include the text to be rendered, use the following font.
• If none of the listed fonts meet the requirements, the operating system determines which font to use.

In this way, we can specify a specific Identifier to identify the status of the screen, but we need to place the specified identifier in front of other fonts, so that the hmtl font will not change.

The key code is as follows:

// Callback var resizeCB = function () {var hstyle = win. getComputedStyle (html, null), ffstr = hstyle ['font-family '], pstr = "portrait," + ffstr, lstr = "landscape," + ffstr, // splice css cssstr = '@ media (orientation: portrait ){. orientation {font-family: '+ pstr +'; }}@ media (orientation: landscape ){. orientation {font-family: '+ lstr +';} '; // load style loadStyleString (cssstr); // Add a class html. classnm E = 'orientation' + html. className; if (hstyle ['font-family '] === pstr) {// initialize and Judge 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 );}}}}();

Click here with the complete code

Test Results

• Portrait effect:

• Landscape effect:

 

Solution 4:

You can make some improvements in supportOrientationchangeUse nativeOrientationchangeIf not, useSolution 3.

The key code is as follows:

// Whether the orientationchange event var isOrientation = ('orientation' in window & 'onorientationchange' in window); // callbackvar 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) ;}) (); // listen to win. addEventListener (isOrientation? EventType: 'resize', callback, false );

Click here with the complete code

 

Solution 5:

Currently, the above solutions are all customizedSubscription and PublishingEvent Mode. Here we can simulate the event mechanism based on the browser.Orientationchange. That isOrientationchange.

The key code is as follows:

Var eventType = 'orientationchang'; // triggers native orientationchangevar 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 );}}}

Click here with the complete code

Through the above five solutions, I have gained a better understanding of mobile terminal horizontal and vertical screen detection. Some things can be written only after my personal experience, I also recorded the reason in the article, hoping to help you. After the evolution of five solutionsOrientationchange-fix, Github address: https://github.com/zhansingsong/orientationchange-fix