我们在是使用手机的时候，会有横竖屏观看的操作，则画面就要随着改变，那么横竖屏是怎样搭配检测的呢？本文就给大家介绍一下用JS判断移动端横竖屏的方法，感兴趣的朋友可以了解看看。

1、不同视口的获取方法

// 获取视觉视口大小（包括垂直滚动条）
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检测横竖屏

// 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检测横竖屏 */
@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标签属性设置

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

5、meta标签属性设置设置刘海屏&底部小黑条

<meta name="viewport" content="viewport-fit=cover" />

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

/* 当使用底部固定导航栏时，我们要为他们设置 padding值： */
body {
 padding-bottom: constant(safe-area-inset-bottom);
 padding-bottom: env(safe-area-inset-bottom);
}

注：constant 函数在iOS < 11.2时生效，env 在iOS >= 11.2时生效

    关于js检测移动端横竖屏的方法就介绍到这，上述实例具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多大家可以关注其它的相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript回调函数怎样运作，基本原理是什么

  在JavaScript中，函数是第一类对象，这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象：它们能被“存储”在变量中，能作为函数参数被传递，能在函数中被创建，能从函数中返回。

• vue中如何定义私有过滤器，相比全局过滤器有何不同

  这篇文章主要介绍的是 vue定义私有过滤器和基本使用，下面文章围绕vue定义私有过滤器的相关资料展开内容,需要的朋友可以参考一下，希望对大家有所帮助

• JavaScript实现继承有多少方法，分别是哪些？

  目录一、背景简介二、原型对象和对象的关系二、使用 prototype 和 proto 实现继承三、使用prototype和proto实现继承四、通过原型链访问对象的方法和属性五、其他方式实现继

• js实现短信验证码倒计时功能

  现在很多网站很软件都添加了短信验证的功能，我们在使用时发现一般获取一次验证码之后，需要等待一段时间才能获取下一次验证码，那么发送短信验证间隔是如何实现呢？这篇文章就主要介绍使用js实现短信验证码倒计时功能。

• Express框架中app.use的用法是什么

  一、设置静态文件目录语法如下：app.use(express.static(_dirname+'/public'));//设置静态文件目录注：将静态文件目录设置为项目根目录+‘/public’，可以这样写app.use(express.stat