横竖屏不同的情况来适配样式

屏幕方向检测方法

最新推荐文章于 2024-05-28 13:54:53 发布

原创最新推荐文章于 2024-05-28 13:54:53 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了三种检测设备屏幕方向的方法：使用CSS的@media查询实现不同方向的样式调整；通过链接外部样式表并设置不同的媒体属性来区分横竖屏；利用JavaScript的matchMedia API监听屏幕方向的变化。

1.内联样式

@media screen and (orientation:portrait) {

    //竖屏

}

@media screen and (orientation:landscape) {

    //横屏

}

2.外联样式

<!--
竖屏
-->

<link
rel="stylesheet"
media="all
 and (orientation:portrait)"
href="..."
/>

<!--
横屏
-->

<link
rel="stylesheet"
media="all
 and (orientation:landscape)"
href="..."
/>

3.js方法

JavaScript

1
2
3
4
5
6
7
8
9
10
var mql = window.matchMedia("(orientation: portrait)");
function onMatchMeidaChange(mql){
    if(mql.matches) {
        // 竖屏
    }else {
        // 横屏
    }
}
onMatchMeidaChange(mql);
mql.addListener(onMatchMeidaChange);

JavaScript

1

2

3

4

5

6

7

8

9

10

var
mql
=
window.matchMedia("(orientation:
 portrait)");

function
onMatchMeidaChange(mql){

    if(mql.matches)
{

        //
 竖屏

    }else
{

        //
 横屏

    }

}

onMatchMeidaChange(mql);

mql.addListener(onMatchMeidaChange);