js竖屏切换程序(js判断移动端横竖屏视口检测实现的几种方法)
类别:编程学习 浏览量:1240
时间:2021-10-02 01:41:36 js竖屏切换程序
js判断移动端横竖屏视口检测实现的几种方法目录
- 1、不同视口的获取方法
- 2、JavaScript检测横竖屏
- 3、CSS检测横竖屏
- 4、meta标签属性设置
- 5、meta标签属性设置设置刘海屏&底部小黑条
// 获取视觉视口大小(包括垂直滚动条) 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);
// 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('横屏') } });
/* 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; } }
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<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判断移动端横竖屏视口检测实现的几种方法的文章就介绍到这了,更多相关js 移动端横竖屏视口检测内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- nodejs登录案例(利用Node.js创建一个密码生成器的全步骤)
- 如何判断数据是json还是字符串(JSON.stringify的多种用法总结)
- js使用递归解析(关于JavaScript递归经典案例题详析)
- js搜索功能的实现(前端JavaScript实现本地模糊搜索功能的方法实例)
- extjs中treepanel属性和方法
- jsforeach语句(JS面试题之forEach能否跳出循环详解)
- JS中prototype
- jQuery多个版本间,以及与其他js文件冲突的解决方法
- pythonweb和nodejs(Node与Python 双向通信的实现代码)
- extjs中Toolbar工具栏
- MVC JsonResult的用法
- js原生tab栏切换(JavaScript实现简易tab栏切换案例)
- react组件分析(react-diagram 序列化Json解读案例分析)
- next js上线(Next.js入门使用教程)
- javaweb购物车案例(js实现模拟购物商城案例)
- 前端表单验证(AmazeUI的JS表单验证框架实战示例分享)
- 息烽 这个村 治垃圾 有招 人人争当卫生模范(息烽这个村治垃圾)
- 今天要吃什么(今天要吃什么菜)
- 三杨之一 南杨 杨溥 安贞履节,酿醴调羹,宰相之气(三杨之一南杨杨溥)
- 今天会下雨吗(今天会下雨吗小说)
- 追连续剧,品古今联4 明代三杨,联妙诗佳(追连续剧品古今联4)
- 三杨 共辅四朝帝王,构建明帝国内阁行政圈(三杨共辅四朝帝王)
热门推荐
- dedecms如何使用(使用dedecms制作英文站的技巧说明)
- css3浮动教程(CSS3使用多列制作瀑布流)
- 宝塔面板必须安装哪些软件(宝塔面板安装后必要的安全设置说明)
- 云服务器自己配置还是主机好(云服务器配置怎么选才好?)
- nginx 使用手册(nginx服务器的下载安装与使用详解)
- 云服务器和物理服务器哪个可靠(云服务器与香港服务器有什么区别?)
- win10下ftp服务器怎么配置(个人主机如何搭建FTP服务器?win10版本)
- .NET中低版本程序调用高版本DLL
- ubuntu20.04安装启动问题(安装ubuntu18.04报:failed to load ldlinux.c32的问题及解决步骤)
- mysql5.7.24rpm安装(MySQL系列-YUM及RPM包安装v5.7.34)