This article shares with you how to use css and js mobile terminals to determine the status of the mobile phone's horizontal and vertical screens respectively. The content is very good. Friends in need can refer to it. I hope it can help everyone.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
There are two methods to determine the horizontal and vertical screen status: css judgment, js judgment
1. Write in the same css file
@media screen and (orientation: portrait) { /*竖屏 css*/} @media screen and (orientation: landscape) { /*横屏 css*/}
When setting the size according to the horizontal and vertical screens, just write the normal page size as usual, and set the horizontal screen style separately. That is, you only need to add the horizontal screen style based on the original style,
@media screen and (orientation: landscape) { /*横屏 css*/} 当用户横屏时加载横屏样式,竖屏时取消横屏样式即加载默认样式。
2. Write it in two css separately, and reference different style files according to the horizontal and vertical screens:
Reference according to the horizontal and vertical screens Different style files
Horizontal screen:
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Vertical screen:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
Remarks: css determines that the horizontal and vertical screens can be seamlessly connected at all times, that is, The horizontal screen loads the horizontal screen style, the vertical screen loads the vertical screen style,
//判断手机横竖屏状态: window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { if (window.orientation === 180 || window.orientation === 0) { console.log("竖屏"); $(".codeIg_s").removeClass('vercreen');//取消横屏样式 } if (window.orientation === 90 || window.orientation === -90 ){ console.log("横屏"); $(".codeIg_s").addClass('vercreen');//添加横屏样式 } }, false);
Note: The horizontal screen style is in vercreen Modify the original default style under the class name and it can be used normally. The disadvantage is that it must be triggered when switching between horizontal and vertical screens.
If the user defaults to the horizontal screen state, the horizontal screen condition judgment will not be triggered. The corresponding condition judgment will only be triggered when the user changes from the horizontal screen to the vertical screen or from the vertical screen to the horizontal screen.
When there is no switching state, no conditional judgment will be performed. This is not as comprehensive as css judgment for horizontal and vertical screens.
Related recommendations:
How to use CSS to achieve a button text sliding effect
About jQuery browser CSS3 close-up compatibility Introduction
The above is the detailed content of How to use css and js mobile terminals to determine the status of the mobile phone's horizontal and vertical screens respectively. For more information, please follow other related articles on the PHP Chinese website!