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

  发布时间:2018-08-27 15:31:01   作者:程先生哈   我要评论

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

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

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

相关文章

  • 浅谈移动端适配大法

    这篇文章主要介绍了浅谈移动端适配大法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-05
  • 关于移动端页面强制竖屏的方法

    有经验的你肯定知道,当用户竖屏打开时,提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式,还要逼用户去开启。这时候用户早就不耐烦了。
    2018-08-27
  • 关于rem适配的3种常用封装

    这篇文章主要给大家介绍了关于rem适配的3种常用封装,文中通过示例代码介绍的非常详细,对各位前端开发者们具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学
    2018-07-13
  • 实现横向滚动条的2种方法示例

    横向滚动条怎么出来?很多人肯定以为是:overflow-x:scroll;当然不是这么简单的,下面这篇文章主要给大家介绍了关于如何实现横向滚动条的2种方法,文中通过示例代码介绍的
    2018-07-06
  • 让https网站发送 referrer https 与 http 跳转 referer 的问题

    最近网站改版很多时候发现广告客户提示找不到来自我们网站的数据,原来是因为我们最近升级了https导致,经过搜索找到如下解决方法,需要的朋友可以参考下
    2018-07-06
  • 关于IE10以下的img标签问题解决

    这篇文章主要给大家介绍了关于IE10以下的img标签问题的解决方法,文中给大家介绍了两种解决方法,大家可以根绝自己的情况选择合适代码解决该问题,需要的朋友可以参考借鉴
    2018-07-02
  • 详解Web前端性能优化详解之资源合并与压缩

    这篇文章主要介绍了详解Web前端性能优化详解之资源合并与压缩,详细的介绍资源合并与压缩的案例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来
    2018-06-19
  • 浅谈网页基本性能优化规则小结

    这篇文章主要介绍了浅谈网页基本性能优化规则小结的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-07
  • Vendor Prefix:为什么需要浏览器引擎前缀

    Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效,,需要的朋友可以参考下
    2018-06-03
  • 浅谈雅虎前端优化的35条军规

    无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢,这篇文章主要介绍了浅谈雅虎前端优化的35条军规,感兴趣的小伙伴
    2018-05-22

最新评论