的你肯定知道,当用户竖屏打开时,提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式,还要逼用户去开启。这时候用户早就不耐烦了。这篇文章主要介绍了关于移动端页面强制竖屏的方法,感兴趣的小伙伴们可以参考一下

最近工作中写了一个移动端的页面,本来是没什么的,但是有一个要求感觉很奇怪,从前也没有遇到过,就是我写的这个页面需要放在一个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定位解决的,但是因为了,这个失效了,所以就没有好的办法了。在竖屏状态下是没问题的。

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

最新资讯
ARM推出新芯片设计 适用于自动驾驶等自动系统

ARM推出新芯片设计 适

芯片设计商ARM公司今天宣布推出一套新的解决方案,用于
百亿月饼市场演化:“触电”“破圈”与升级

百亿月饼市场演化:“触

月饼市场持续往低线城市下沉,同时消费者采购月饼时呈现
蚂蚁配售基金独家代销是模式创新还是利益之争

蚂蚁配售基金独家代销

蚂蚁集团战略配售基金热销之际,业界也出现不少关于其代
ATM机成“鸡肋” 智能转型升级才能站上C位

ATM机成“鸡肋” 智能

市场分化是未来趋势,谁的研发步伐快,会优先得到投资者青
中通快递“回家” 市值破2000亿港元

中通快递“回家” 市

中通快递成为第一个同时在美国、中国香港两地上市的快
数字技术和金融科技助力数字经济新未来

数字技术和金融科技助

在这次疫情中,大量经济社会活动从“线下”迁移到“线上
最新文章
网页简单布局之结构与表现原则分享

网页简单布局之结构与

一般来说html结构 css表现 javascrip行为,网页布局要考
隐藏 Web 中的元素方法及优缺点教程详解

隐藏 Web 中的元素方

这篇文章主要介绍了隐藏 Web 中的元素方法及优缺点教
白话分析自适应跟响应式的区别详解

白话分析自适应跟响应

这篇文章主要介绍了白话分析自适应跟响应式的区别详解
div与div之间有空隙的解决方法

div与div之间有空隙的

今天在制作页面的时候发现两个div之间有空隙导致两个
推荐一款酷炫闪烁的告警按钮

推荐一款酷炫闪烁的告

今天小编给大家推荐一款酷炫闪烁的告警按钮,非常不错,具
移动端开发1px线的理解与解决办法

移动端开发1px线的理

这篇文章主要给大家介绍了关于移动端开发1px线的理解