How to use css and js mobile terminals to determine the status of the mobile phone's horizontal and vertical screens respectively

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.

Disable the user's automatic scaling function:

<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), css judgment horizontal screen Or portrait screen

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,

(2) js determines whether the horizontal screen or the vertical screen

//判断手机横竖屏状态：
    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!