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

猜你喜欢

• JS中如何创建二维数组，有什么坑要注意

  二维数组本质上是以数组作为数组元素的数组，即"数组的数组"，类型说明符 数组名[常量表达式][常量表达式]。二维数组又称为矩阵，行列数相等的矩阵称为方阵。对称矩阵a[i][j] = a[j][i]，对角矩阵:n阶方阵主对角线外都是零元素

• 用JS怎样实现间隔10秒载获取验证码的功能？

  对于验证码详细大家都不陌生，我们在登录或者注册页面，常能看到验证码。而我们在做验证码的时候要考虑到，获取验证码的时间间隔，因为如果不设置这个，那么就会出现短时间或者大量验证码的情况，对此这篇文章就给大家介绍用JS实现间隔10秒载获取验证码的功能，感兴趣的朋友就继续往下看吧

• 用JS怎样做点击复制文本的功能？

  用JS怎样做点击复制文本的功能？点击按钮实现复制文本的功能还是比较实用的，例如下本实现的复制邀请码的功能，此外点击复制文本的应用场景还有很多。感兴趣的朋友可以参考下文实例，接下来我们就一起来了解看看。

• Vue框架下怎么实现千位分隔符，方法是什么

  这篇文章主要为大家详细介绍了vue全局实现数字千位分隔符格式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 用原生JS可以做百叶窗效果吗，代码如何写

  这篇文章主要为大家详细介绍了原生JS实现百叶窗特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下