web前端：移动端横竖屏检测

作者:下落香樟树更新于： 2020-03-04 19:48:25

　　网页设计主要以Adobe产品为主，常见的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代码工具，其他是图形图像和FL动画工具。还有最近几年Adobe新出的EdgeReflow、EdgeCode、Muse。

　　1、不同视口的获取方法

　　//获取视觉视口大小（包括垂直滚动条）

　　letiw=window.innerWidth,

　　ih=window.innerHeight;

　　console.log(iw,ih);

　　//获取视觉视口大小（内容区域大小，包括侧边栏、窗口镶边和调整窗口大小的边框）

　　letow=window.outerWidth,

　　oh=window.outerHeight;

　　console.log(ow,oh);

　　//获取屏幕理想视口大小，固定值（屏幕分辨率大小）

　　letsw=window.screen.width,

　　sh=window.screen.height;

　　console.log(sw,sh);

　　//获取浏览器可用窗口的大小（包括内边距、但不包括垂直滚动条、边框和外边距）

　　letaw=window.screen.availWidth,

　　ah=window.screen.availHeight;

　　console.log(aw,ah);

　　//包括内边距、滚动条、边框和外边距

　　letdow=document.documentElement.offsetWidth,

　　doh=document.documentElement.offsetHeight;

　　console.log(dow,doh);

　　//在不使用滚动条的情况下适合视口中的所有内容所需的最小宽度和高度

　　letdsW=document.documentElement.scrollWidth,

　　dsH=document.documentElement.scrollHeight;

　　console.log(dsW,dsH);

　　//包含元素的内边距，但不包括边框、外边距或者垂直滚动条

　　letcw=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检测横竖屏*/

　　@mediascreenand(orientation:portrait){

　　/*竖屏*/

　　#app{

　　width:100vw;

　　height:100vh;

　　background:red;

　　}

　　}

　　@mediascreenand(orientation:landscape){

　　/*横屏*/

　　#app{

　　width:50vw;

　　height:100vh;

　　background:green;

　　}

　　}

　　4、meta标签属性设置

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

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

　　/*当使用底部固定导航栏时，我们要为他们设置padding值：*/

　　body{

　　padding-bottom:constant(safe-area-inset-bottom);

　　padding-bottom:env(safe-area-inset-bottom);

　　}

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

　　网页设计一般分为三种大类:功能型网页设计(服务网站&B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同，应选择不同的网页策划与设计方案。