移动端强制横屏和强制竖屏解决方案

真实需求场景:都是痛点,说多了都是泪  

场景1、产品说有一个H5需求,然后设计丢过来一个横屏的设计稿和一个竖屏的设计稿。——这明明就是两个需求555

场景2、设计给了一个竖屏的设计稿,用户横屏时提示:“请竖屏查看!”。微信手Q体验棒棒哒,产品说这个要在游戏里面推,游戏是横屏的,也就是说所有游戏内用户看到页面第一眼都是:“请竖屏查看!”。亲游戏内用户占比60%以上,那才是上帝,你就是这样对待上帝的吗?

场景3、设计给了一个横屏的设计稿,用户竖屏时提示:“请横屏查看!”。好,横就横谁怕谁,手机横过来后发现还是“请横屏查看!”,原来手机锁定屏幕旋转了,手机解除锁定,再去看页面“请横屏查看!”,想了半天原来微信也锁定屏幕旋转,你牛,你横,我不看了还不行吗?

做为一名切图仔别问我痛不痛?需求虐我千百遍,我待需求如初恋。有得选吗?呵呵

有,不能忍就改变

强制横屏,强制竖屏 你 值得拥有

强制横屏基本原理:

1.png


配合实例完整源码阅读更好理解:
2.png
简单版的长页面(推荐)

3.png
单屏居中布局页面

实现原理的核心代码分解:

1.在横屏下完成重构,实现页面可以缩放大小,设计稿宽度为1334px,html字体大小为100px,

bod设置overflow:auto;用于解决页面滚动问题,用竖屏下的X轴滚动达到强制横屏后的“X”轴的滚动效果。
CSS
html { font-size: 100px; width:100%; height:100%; } 
body { font-size: 26px; overflow:auto; width:100%; height:100%; background: #0c0d0d;}
.wrapbox { overflow:hidden;}
wrap {position:absolute;width: 13.34rem; background: #0c0d0d; -webkit-transform-origin: 0 0; transform-origin: 0 0;}
.wrap img {width: 13.34rem; }

Html
<div class="wrapbox" id="wrapbox"> 
<!--视图外框-->
<div class="wrap" id="wrap">
<!--内容块-->
</div>
</div>

Javacscript 
var $wrapbox = $("#wrapbox"),$wrap = $("#wrap"); 
function orientationfn() {
setTimeout(function () {
var html = document.documentElement;
var w = html.clientWidth, h = html.clientHeight;
if (h < w) {
//横屏
html.style.fontSize = w / 1334 * 100 + "px";
} else {
//竖屏
html.style.fontSize = h / 1334 * 100 + "px";
}
}, 200);
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", orientationfn, false);
orientationfn();

注:javascript部本没有任何依赖,不想用Zepto或JQ的同学可以直接改成原生的哦

 2.在竖屏下实现横屏的设计稿, 内容块宽=h,内容块高=w,页面缩放适应浏览器窗口大小,横屏和竖屏窗口比例是不一样的。
$wrap.css({ "width": h }); 
$wrapbox.css({ "width": h, "height": ($wrap.height() - 160) });

3.内容旋转-90度,以左上角为基点旋转(长页面必须是逆时针旋转才可以滚动哦)
4.内容块x轴移动 -h px,竖屏下横屏的视觉重构已经完成。当用户从竖屏回到横屏时清除竖屏的代码
function orientationfn() { 
setTimeout(function () {
var html = document.documentElement;
var w = html.clientWidth, h = html.clientHeight;
if (h < w) {
//横屏
html.style.fontSize = w / 1334 * 100 + "px";
$wrap.css({ "width": "100%", "webkitTransform": "rotate(0deg)", "transform": "rotate(0deg)" });
$wrapbox.css({ "width": "auto", "height": "auto" });
} else {
//竖屏
html.style.fontSize = h / 1334 * 100 + "px";
$wrap.css({ "width": h, "webkitTransform": "rotate(-90deg) translate(-" + h + "px,0)", "transform": "rotate(-90deg) translate(-" + h + "px,0)" });
$wrapbox.css({ "width": h, "height": ($wrap.height() - 160) });
}
}, 200);
}

长页面强制横屏基本原理讲解完成。

强制横屏的各种坑:

1.局部滚动,滚动方向相反
滚动元素的父级元素加-webkit-overflow-scrolling: touch;属性

2.固定定位(position:fixed;)的元素错位
用绝对定位(position:absolute;)实现固定定位的效果,对wrapbox元素定位

3.划屏事件x、y轴数据相反
需要划屏操作的元素放到wrapbox元素的子级,或者直接把划屏事件写到wrapbox元素上,这样元素没有被旋转也就不存在这个BUG,再考虑用iScroll.js

4.竖屏后某些定位的元素z_index层级过底不可见,因为内容块的transform属性z_index过高造成
为元素添加-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);属性


强制竖屏和强制横屏原理一样,只是做法上只是方向不同,大家可以举一反三,如有疑问请留言。

0 个评论

要回复文章请先登录注册