我们在是使用手机的时候，会有横竖屏观看的操作，则画面就要随着改变，那么横竖屏是怎样搭配检测的呢？本文就给大家介绍一下用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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 浅谈node.js的cors跨域配置实现

  篇文章主要给大家分享的是node.js的cors跨域配置实现的内容，本文有详细的介绍及代码，对大家学习和工作有一定的参考学习价值，因此分享给点家做个参考，需要的朋友可以了解看看。

• JS函数的定义方式有几种，函数如何使用

  本篇文章给大家带来了关于JavaScript的相关知识，其中主要整理了函数的定义与基本使用的相关问题，包括了用函数语句定义、函数的调用、未定义的实参等等内容，下面一起来看一下，希望对大家有帮助。

• webpack文件打包错误是什么情况?怎样解决？

  webpack文件打包错误是什么情况?对于webpack文件打包错误的情况不少朋友都遇到过，但是对于如何解决一些朋友可能不是很了解，对此这篇文章小编就给大家分享一下webpack文件打包错误的原因以及解决方法，有需要的朋友可以参考。

• Vue中表格高亮效果怎么实现，有什么技巧

  这篇文章主要介绍了vue+elementUI中表格高亮或字体颜色改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

• 如何用原生js写一个贪吃蛇小游戏？

  不少朋友应该都有玩过贪吃蛇小游戏吧，贪吃蛇小游戏可谓是经典游戏了，那么我们如果使用原生JS怎么写一个贪吃蛇小游戏呢？下面就给大家分享使用原生js实现贪吃蛇游戏代码，感兴趣的朋友可以参考学习。