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

猜你喜欢

• vue怎样实现修改密码的功能？

  vue怎样实现修改密码的功能？在vue中，我们想要做可以修改密码的功能，可以通过两个字段联合校验来实现。下文有实现代码及详细的代码详解，感兴趣的朋友可以了解看看。

• 怎么样实现简单计算器，主要代码是什么

  这篇文章主要为大家详细介绍了微信小程序实现简单计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 用vue怎样写个简单的公共轮播图组件

  本文用vue简单的实现了一个轮播图的基础功能，并抽离出来作为一个公共组件，方便复用

• React Context状态管理的实现是怎样的

  本文主要介绍了基于React Context实现一个简单的状态管理的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• Node.js中buffer模块是什么？一文了解基本操作

  这篇文章给大家分享的是Node.js中buffer模块的相关内容，一些朋友可能不知道buffer是什么，下文会给大家来详细的介绍一下，另外还给大家介绍了buffer的创建、复制、拼接、截取、填充等等，感兴趣的朋友接下来就跟随小编一起了解看看吧。