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

不言
Release: 2018-07-21 10:46:55
Original
2441 people have browsed it

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">
Copy after login

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*/}
Copy after login

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*/}
当用户横屏时加载横屏样式,竖屏时取消横屏样式即加载默认样式。
Copy after login

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">
Copy after login

Vertical screen:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
Copy after login

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(&#39;vercreen&#39;);//取消横屏样式        } 
        if (window.orientation === 90 || window.orientation === -90 ){ 
            console.log("横屏");
            $(".codeIg_s").addClass(&#39;vercreen&#39;);//添加横屏样式        }  
    }, false);
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template