伏龙阁资源网

关于移动端页面强制竖屏的方法
站长资源 2024/11/25 佚名
2 0

最近工作中写了一个移动端的页面，本来是没什么的，但是有一个要求感觉很奇怪，从前也没有遇到过，就是我写的这个页面需要放在一个APP中，但是这个APP是横屏的，打开这个页面的webview也是横屏的（最新版的APP打开的时候是竖屏的webview），本来我们是用的rem布局，横屏的状态下也是没有什么问题的，但是甲方希望在横屏打开的时候强制这个页面竖屏显示。所以就有了下面一系列的操作了。

首先是判断横屏的状态，使用的一下的代码：

function orient() {
            if(window.orientation == 90 || window.orientation == -90) {//横屏
                //ipad、iphone竖屏；Andriod横屏
                //$("body").attr("class", "landscape");
                //orientation = 'landscape';
                //alert("ipad、iphone竖屏；Andriod横屏");
                $("p").text("横屏");
                return false;
            } else if(window.orientation == 0 || window.orientation == 180) {//竖屏
                //ipad、iphone横屏；Andriod竖屏
//                $("body").attr("class", "portrait");
//                orientation = 'portrait';
                //alert("ipad、iphone横屏；Andriod竖屏");
                $("p").text("竖屏");
                return false;
            }
        }
        //页面加载时调用
        $(function() {
            orient();
        });
        //用户变化屏幕方向时调用
        $(window).on('orientationchange', function(e) {
            
            orient();
            
        });

这个就是在监测手机的方向。但是，因为打开的这个APP的时候就是横屏打开的，多以这个是没办法监测到的，而且这个还有一个前提就是手机必须打开了自动旋转才是可以的。所以上面的方法被抛弃了。

既然智能的办法被抛弃了，那就用最贱的办法，就是监测屏幕的宽度和高度。当高大于宽的时候，我们默认手机是竖屏的状态，当宽大于高的时候，我们认为是横屏的状态。（当然了这个也是有局限的，但是考虑到新的APP中已经把横竖屏的问题解决了，这里就姑且这么做了）。当竖屏的状态我们是不需要做什么的。但是在横屏的状态下，我们就要把页面转动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定位的元素，定位就不管用了（代码中的<footer>就是作为tab切换放在底部的）；这个就需要我们更改了，既然旋转父元素，子元素就不管用了，那我们就不要旋转父元素了，直接旋转他的兄弟元素就可以了。我这里是旋转的一个叫做#vue的元素，因为我的页面中的其他的内容全部是在这个div当中的。所以我就旋转了这个元素。然后这个时候定位是可以用的，但是样式不对，所以在我的add_tab这个函数中就是在调整这个元素的大小和样式，让他能正常的显示在屏幕的右侧，也就是竖屏的状态下，屏幕的底端。

第二点：

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

第三点：

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接