> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# 横竖屏检测

## 1、不同视口的获取方法

```javascript title="获取视觉视口大小"
// 获取视觉视口大小（包括垂直滚动条）
let iw = window.innerWidth,
    ih = window.innerHeight;
console.log(iw, ih);

// 获取视觉视口大小（内容区域大小，包括侧边栏、窗口镶边和调整窗口大小的边框）
let ow = window.outerWidth,
    oh = window.outerHeight;
console.log(ow, oh);

// 获取屏幕理想视口大小，固定值（屏幕分辨率大小）
let sw = window.screen.width,
    sh = window.screen.height;
console.log(sw, sh);

// 获取浏览器可用窗口的大小（包括内边距、但不包括垂直滚动条、边框和外边距）
let aw = window.screen.availWidth,
    ah = window.screen.availHeight;
console.log(aw, ah);

// 包括内边距、滚动条、边框和外边距
let dow = document.documentElement.offsetWidth,
    doh = document.documentElement.offsetHeight;
console.log(dow, doh);

// 在不使用滚动条的情况下适合视口中的所有内容所需的最小宽度和高度
let dsW = document.documentElement.scrollWidth,
    dsH = document.documentElement.scrollHeight;
console.log(dsW, dsH);

// 包含元素的内边距，但不包括边框、外边距或者垂直滚动条
let cw = document.documentElement.clientWidth,
    ch = document.documentElement.clientHeight;
console.log(cw, ch);
```

## 2、JavaScript 检测横竖屏

```javascript title="检测横竖屏"
// window.orientation：获取屏幕旋转方向
window.addEventListener("resize", () => {
    // 正常方向或屏幕旋转180度
    if (window.orientation === 180 || window.orientation === 0) {
        console.log("竖屏");
    }

    // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
    if (window.orientation === 90 || window.orientation === -90) {
        console.log("横屏");
    }
});
```

## 3、CSS 检测横竖屏

```css title="CSS 检测横竖屏"
/* css检测横竖屏 */
@media screen and (orientation: portrait) {
    /* 竖屏 */
    #app {
        width: 100vw;
        height: 100vh;
        background: red;
    }
}

@media screen and (orientation: landscape) {
    /* 横屏 */
    #app {
        width: 50vw;
        height: 100vh;
        background: green;
    }
}
```

## 4、meta 标签属性设置

```html title="标签属性设置"
<meta
    name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
```

## 5、设置刘海屏和底部导航小黑条

```html title="异形屏适配 meta"
<meta name="viewport" content="viewport-fit=cover" />
```

**设置安全区域与边界的距离**

```css title="异形屏适配 CSS"
/* 当使用底部固定导航栏时，我们要为他们设置 padding值： */
body {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
```

:::danger 注意
constant 函数在 iOS\<11.2 时生效，env 在 iOS >= 11.2 时生效
:::