#移动端横竖屏视口检测
预计阅读时间: 小于 1 分钟#1、不同视口的获取方法
获取视觉视口大小
1// 获取视觉视口大小（包括垂直滚动条）
2let iw = window.innerWidth,
3 ih = window.innerHeight;
4console.log(iw, ih);
5
6// 获取视觉视口大小（内容区域大小，包括侧边栏、窗口镶边和调整窗口大小的边框）
7let ow = window.outerWidth,
8 oh = window.outerHeight;
9console.log(ow, oh);
10
11// 获取屏幕理想视口大小，固定值（屏幕分辨率大小）
12let sw = window.screen.width,
13 sh = window.screen.height;
14console.log(sw, sh);
15
16// 获取浏览器可用窗口的大小（包括内边距、但不包括垂直滚动条、边框和外边距）
17let aw = window.screen.availWidth,
18 ah = window.screen.availHeight;
19console.log(aw, ah);
20
21// 包括内边距、滚动条、边框和外边距
22let dow = document.documentElement.offsetWidth,
23 doh = document.documentElement.offsetHeight;
24console.log(dow, doh);
25
26// 在不使用滚动条的情况下适合视口中的所有内容所需的最小宽度和高度
27let dsW = document.documentElement.scrollWidth,
28 dsH = document.documentElement.scrollHeight;
29console.log(dsW, dsH);
30
31// 包含元素的内边距，但不包括边框、外边距或者垂直滚动条
32let cw = document.documentElement.clientWidth,
33 ch = document.documentElement.clientHeight;
34console.log(cw, ch);#2、JavaScript 检测横竖屏
检测横竖屏
1// window.orientation：获取屏幕旋转方向
2window.addEventListener("resize", () => {
3 // 正常方向或屏幕旋转180度
4 if (window.orientation === 180 || window.orientation === 0) {
5 console.log("竖屏");
6 }
7
8 // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
9 if (window.orientation === 90 || window.orientation === -90) {
10 console.log("横屏");
11 }
12});#3、CSS 检测横竖屏
CSS 检测横竖屏
1/* css检测横竖屏 */
2@media screen and (orientation: portrait) {
3 /* 竖屏 */
4 #app {
5 width: 100vw;
6 height: 100vh;
7 background: red;
8 }
9}
10
11@media screen and (orientation: landscape) {
12 /* 横屏 */
13 #app {
14 width: 50vw;
15 height: 100vh;
16 background: green;
17 }
18}#4、meta 标签属性设置
标签属性设置
1<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />#5、设置刘海屏和底部导航小黑条
异形屏适配 meta
1<meta name="viewport" content="viewport-fit=cover" />设置安全区域与边界的距离
异形屏适配 CSS
1/* 当使用底部固定导航栏时，我们要为他们设置 padding值： */
2body {
3 padding-bottom: constant(safe-area-inset-bottom);
4 padding-bottom: env(safe-area-inset-bottom);
5}注意「👀」：
constant 函数在 iOS<11.2 时生效，env 在 iOS >= 11.2 时生效
目 录