How to judge
Mobile devices provide two objects, one attribute, and one event:
(1) window.orientation belongs to the previous attribute of the window object; there are three values: 0 is portrait, 90 is inverted to the left and turns to landscape mode, -90 is inverted to the right and turns to landscape mode, and the last 180 is whether the device is inverted to the bottom or vertical.
(2) orientationchange is an event that will trigger this event when the device rotates, just like the resize event used on the PC.
When these two are used together, it is easy to obtain the horizontal and vertical screen status of the device. The code is as follows:
(function(){ var init = function(){ var updateOrientation = function(){ var orientation = window.orientation; switch(orientation){ case 90: case -90: orientation = 'landscape'; break; default: orientation = 'portrait'; break; } //do something //For example, add a state to the html tag// Then display different sizes of document.body.parentNode.setAttribute('class',orientation); }; window.addEventListener('orientationchange',updateOrientation,false); updateOrientation(); }; window.addEventListener('DOMContentLoaded',init,false);})();In css you can write this way:
/**Performance div border shows blue**/.portrait body div{ border:1px solid blue;}/**Performance div border shows yellow**/.landscape body div{ border:1px solid yellow;}Of course, you can also use media queries (recommended):
@media all and (orientation: portrait) { body div { border:1px solid blue; }}@media all and (orientation: landscape) { body div { border:1px solid yellow; }}compatibility
How to deal with the situation where window.orientation or orientationchange does not exist in the device? (Generally one does not exist, the other does not exist, otherwise)
In early development, Chrome's device model mode is often used, but this property does not exist, so how can I get this value? The simple method is to judge based on the comparison of width and height. If the width is smaller than the height, it is a vertical screen, and the width and height are a horizontal screen.
I know how to get the result. The next thing is how to listen for device reversal events. Since orientationchange is not available, use the most basic resize event or use timer to detect it. Please look at the code:
(function(){ var updateOrientation = function(){ var orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait'; document.body.parentNode.setAttribute('class',orientation); }; var init = function(){ updateOrientation(); //Check every 5 seconds//window.setInterval(updateOrientation,5000); //Listen the resize event window.addEventListener('resize',updateOrientation,false); }; window.addEventListener('DOMContentLoaded',init,false);})();Finally, combining the above two methods is a complete detection solution
(function(){ var supportOrientation = (typeof window.orientation === 'number' && typeof window.onorientationchange === 'object'); var init = function(){ var htmlNode = document.body.parentNode, orientation; var updateOrientation = function(){ if(supportOrientation){ orientation = window.orientation; switch(orientation){ case 90: case -90: orientation = 'landscape'; break; default: orientation = 'portrait'; break; } }else{ orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait'; } htmlNode.setAttribute('class',orientation); }; if(supportOrientation){ window.addEventListener('orientationchange',updateOrientation,false); }else{ // Listen to the resize event window.addEventListener('resize',updateOrientation,false); } updateOrientation(); }; window.addEventListener('DOMContentLoaded',init,false);})();Summarize
Use the orientationchange event to monitor whether the device rotates, and use the window.orientation property to determine whether it is currently horizontal or vertical screen, so as to perform different operations.