Use media to determine the problem encountered in screen width:
On iOS, I can do it when I rotate the screen, but it didn't respond on Android. The horizontal screen still shows my vertical screen style.
After checking the information, if the media of css3 wants to have a better display effect on the mobile side, you need to add this code to the header of the page.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
But I can't use this code. Because my page is adapted. The font size and style size can be displayed according to the size of the screen. If I add this code, my adaptation will not work. So use other methods
Solution:
The mobile device provides an event: orientationChange event
This event was added by Apple for Safari. So that developers can determine when the user switches the device from landscape view to portrait view mode.
This event will be triggered when the device rotates.
// Listen for orientation changeswindow.addEventListener("orientationchange", function() {// Announce the new orientation numberert(window.orientation);}, false);As long as the user changes the device's viewing mode, the orientationChange event will be triggered. The event object at this time does not contain any valuable information.
Because the only relevant information can be accessed through window.orientation
orientation attribute
It has three values: 0,90, -90
0 is portrait, -90 means that the device rotates horizontally to the landscape mode on the right, while 90 means that the device rotates horizontally to the landscape mode on the left.
There is another one that is 180, which means the vertical screen but is a flipped vertical screen mode. But this model has not been supported yet.
As shown in the figure:
Therefore, combining this orientationChange event and the orientation property of the window, it is easier for us to determine whether the device is in a horizontal or vertical screen.
(function(){var init = function(){var updateOrientation = function(){var orientation = window.orientation;switch(orientation){case 90:case -90:orientation = 'landscape'; //Here is horizontal break;default:orientation = 'portrait'; //Here is vertical break;}//html Add different classes according to different rotation states, add landscape to landscape, and vertical screen //Plusportdocument.body.parentNode.setAttribute('class',orientation);};// This event is called for each rotation. window.addEventListener('orientationchange',updateOrientation,false);// Initialization of event updateOrientation();};window.addEventListener('DOMContentLoaded',init,false);})();Therefore, class can be added according to different rotation states, so our css can be written like this
/**Performance body shows red**/.portrait body div{background: red;}/**Handwidth body shows blue**/.landscape body div{background: blue;}Another way of writing is to use media queries
@media all and (orientation: portrait) {body div {background: red;} }@media all and (orientation: landscape) { body div {background: blue; } }This orientation media query works on iOS3.2+ and Android 2.0+ as well as other browsers.
Relatively speaking, this kind of code is a little more concise. With the above js+css, this kind of code is pure css. When the device rotates, the css that change the direction will be called according to the direction of the device rotated.
compatibility
Some devices do not provide an orientationchange event, but do not trigger the window's resize event. And if media queries don't support them, what should we do?
It can be judged by the resize event. Use innerWidth and innerHeight to retrieve the screen size. Judging by the comparison of width and height, width and height are vertical screens, and width and height are horizontal screens.
The code is as follows:
(function(){var updateOrientation = function(){var orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';document.body.parentNode.setAttribute('class',orientation);};var init = function(){updateOrientation();//listen to the resize event window.addEventListener('resize',updateOrientation,false);};window.addEventListener('DOMContentLoaded',init,false);})();In this way, we can see the style changes brought by the screen rotation in the browser.
The combination of the two detection methods is as follows:
(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);})();Using this method, you can solve the annoying horizontal and vertical screen detection of mobile devices.