强制竖屏移动端页面的方法

码农公社  210.net.cn   210是何含义?10月24日是程序员节,1024 = 210、210既 210 之意。

在横屏打开的时候强制这个页面以竖屏方式显示。

起初,我的思路是这样的:

判断横屏的状态,监测方向。但是,因为这个APP打开的时候就是横屏的,所以是没办法监测到方向的,而且还有一个前提就是手机必须打开了自动旋转才是可以的。障碍太多,所以这个思路被抛弃了。


好吧,既然智能的法子不好实现,那就用最low的办法,就是监测屏幕的宽度和高度。

当高大于宽的时候,判断手机是竖屏的状态,当宽大于高的时候,我们认为是横屏的状态。(这个也是有局限的)。

竖屏的状态我们是不需要做什么的。但是在横屏的状态下,我们就要把页面转动90度了。

废话不多说,直接看代码:


// 利用 CSS3 旋转 对根容器逆时针旋转 90 度 强制用户进行竖屏显示
var detectOrient = function() {
    var width = document.documentElement.clientWidth,
        height = document.documentElement.clientHeight,
        //$wrapper = document.getElementsByTagName("body")[0],
        $wrapper = document.getElementById("vue"),
        style = "";
    if(width <= height) { // 横屏
//        style += "width:" + width + "px;"; // 注意旋转后的宽高切换
//        style += "height:" + height + "px;";
//        style += "-webkit-transform: rotate(0); transform: rotate(0);";
//        style += "-webkit-transform-origin: 0 0;";
//        style += "transform-origin: 0 0;";
        style += "font-size:" + (width * 100 / 1125) + "px";
        var html_doc = document.getElementsByTagName("html")[0];
        html_doc.style.cssText = "font-size:" + (width * 100 / 1125) + "px";
    } else { // 竖屏
        style += "width:" + height + "px;";
        style += "min-height:" + width + "px;";
        style += "-webkit-transform: rotate(-90deg); transform: rotate(-90deg);";
        // 注意旋转中点的处理
        style += "-webkit-transform-origin: " + height / 2 + "px " + (height / 2) + "px;";
        style += "transform-origin: " + height / 2 + "px " + (height / 2) + "px;";
        //style += "font-size:" + height * 100 / 1125 + "px;";
        //$("html").css({"font-size":(height * 100 / 1125),"overflow-y":"hidden"});
        var html_doc = document.getElementsByTagName("html")[0];
        html_doc.style.cssText = "font-size:" + height * 100 / 1125 + "px;" + "overflow-y:"+"hidden;"+"height:"+height+"px;";
        style += "overflow-y: hidden;";
        add_tab();
        $wrapper.style.cssText = style;
    }
     
     
}
window.onresize = detectOrient;
detectOrient();
 
function add_tab(){
    var clone_tab = $("footer").clone();
    $("footer").remove();
    clone_tab.css({"transform":"rotate(-90deg)","transform-origin":"top right"})
    $("body").append(clone_tab);
    clone_tab.css({"position":"fixed","right":"1.77rem","bottom":"4rem","left":"auto","top":"0","width":"11.25rem","height":"1.77rem"})
}


这段代码对于前端开发人员来说不是很难,但是需要注意的有三点。


第一点:

最开始的时候我是为了方便直接旋转的整个的html,这个有时候会有一个问题,就是页面中的fixed定位的元素需要我们更改。我旋转的是一个叫做#vue的元素,因为我的页面中的其他的内容全部在这个div当中的。所以我就旋转了这个元素。然后这个时候定位是可以用的,但是样式不对,所以在我的add_tab这个函数中就是在调整这个元素的大小和样式,让他能正常的显示在屏幕的右侧,也就是竖屏的状态下,屏幕的底端。


第二点:

第二点需要注意的是,因为我用的是rem布局,所以我会更改html的font-size,但是这个时候就要小心了,当我们旋转过来之后,宽变成了高,高变成了宽,所以我们需要用height来计算根目录的字体大小。


第三点:

我们注意旋转的中心,默认的旋转中心是在所选元素的中心点。所以我们要改变旋转的中心点。旋转之后还要把html的overflow-y:hidden。否则就会出现多余的滚动。

这样的话,基本上就把整个页面旋转过来了,并且把底部的fixed定位的元素再次定位成功了。比较幸运的是我们用的弹窗是用的layui的弹窗,再把这个弹窗旋转90度就可以了。

有个问题是没办法解决的,就是当页面有滚动条的时候,弹窗出来以后,滑动后面的遮罩层的话,后面的页面会向上滑动。这个本来是可以解决的,我上面的这个文章就是利用fixed定位解决的,但是因为旋转了,这个失效了,所以就没有好的办法了。在竖屏状态下是没问题的。




评论