先进行分类。有空填坑。
1. pc长页面,h5长页面,根据浏览器宽度适配。
考虑:fixed属性的页面头部、弹窗,可能需要才用.container .top .pup 三部分分别进行适配。
(参考wh春节活动新闻态)
2. h5单屏,根据浏览器的宽度进行居中适配。
考虑:最小高度是多少。
(参考ddz春节剪纸活动)
2扩展. 考虑固定宽高的盒子,浏览器进行宽度或高度适配,总之要在一屏幕内完全显示。
类似需求可能在图片放入某个框的时候常常会出现。
(暂无参考)
3. 判断屏幕是横屏或者竖屏,针对不同屏幕进行旋转适配。(之前单开的链接在:https://www.cnblogs.com/ximu1009/p/16700191.html
缺陷:如果使用swiper插件,在旋转之后滑动手势无法旋转,慎用此方法!!
场景:(例如H5小游戏)
① 页面内容在一个屏幕内展示完,不上下左右滑动。
② 页面内容左右居中/上下居中。
③ 页面原本内容为竖屏,需要在横屏浏览器中强制左旋90°。
// 横竖屏适配 var vertical = document.documentElement.clientHeight >= document.documentElement.clientWidth if(!vertical){ var wth = document.documentElement.clientWidth / document.documentElement.clientHeight $('body').css({ 'transform': 'rotate(-90deg) scale(' + wth +') ', 'transform-origin': 'center center', }) } else { $('body').css({ 'transform': '', 'transform-origin': '', }) }
标签:浏览器,documentElement,兼容问题,适配,transform,document,页面 From: https://www.cnblogs.com/ximu1009/p/17044326.html