关于移动端页面强制竖屏

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

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

 1         function orient() {
 2             if(window.orientation == 90 || window.orientation == -90) {//横屏
 3                 //ipad、iphone竖屏；Andriod横屏
 4                 //$("body").attr("class", "landscape");
 5                 //orientation = 'landscape';
 6                 //alert("ipad、iphone竖屏；Andriod横屏");
 7                 $("p").text("横屏");
 8                 return false;
 9             } else if(window.orientation == 0 || window.orientation == 180) {//竖屏
10                 //ipad、iphone横屏；Andriod竖屏
11 //                $("body").attr("class", "portrait");
12 //                orientation = 'portrait';
13                 //alert("ipad、iphone横屏；Andriod竖屏");
14                 $("p").text("竖屏");
15                 return false;
16             }
17         }
18         //页面加载时调用
19         $(function() {
20             orient();
21         });
22         //用户变化屏幕方向时调用
23         $(window).on('orientationchange', function(e) {
24             
25             orient();
26             
27         });

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

　　既然智能的办法被抛弃了，那就用最贱的办法，就是监测屏幕的宽度和高度。当高大于宽的时候，咱们默认手机是竖屏的状态，当宽大于高的时候，咱们认为是横屏的状态。（固然了这个也是有局限的，可是考虑到新的APP中已经把横竖屏的问题解决了，这里就姑且这么作了）。当竖屏的状态咱们是不须要作什么的。可是在横屏的状态下，咱们就要把页面转动90度了。废话很少说，直接看代码：

　

 1 // 利用 CSS3 旋转 对根容器逆时针旋转 90 度 强制用户进行竖屏显示
 2 var detectOrient = function() {
 3     var width = document.documentElement.clientWidth,
 4         height = document.documentElement.clientHeight,
 5         //$wrapper = document.getElementsByTagName("body")[0],
 6         $wrapper = document.getElementById("vue"),
 7         style = "";
 8     if(width <= height) { // 横屏
 9 //        style += "width:" + width + "px;"; // 注意旋转后的宽高切换
10 //        style += "height:" + height + "px;";
11 //        style += "-webkit-transform: rotate(0); transform: rotate(0);";
12 //        style += "-webkit-transform-origin: 0 0;";
13 //        style += "transform-origin: 0 0;";
14         style += "font-size:" + (width * 100 / 1125) + "px";
15         var html_doc = document.getElementsByTagName("html")[0];
16         html_doc.style.cssText = "font-size:" + (width * 100 / 1125) + "px";
17     } else { // 竖屏
18         style += "width:" + height + "px;";
19         style += "min-height:" + width + "px;";
20         style += "-webkit-transform: rotate(-90deg); transform: rotate(-90deg);";
21         // 注意旋转中点的处理
22         style += "-webkit-transform-origin: " + height / 2 + "px " + (height / 2) + "px;";
23         style += "transform-origin: " + height / 2 + "px " + (height / 2) + "px;";
24         //style += "font-size:" + height * 100 / 1125 + "px;";
25         //$("html").css({"font-size":(height * 100 / 1125),"overflow-y":"hidden"});
26         var html_doc = document.getElementsByTagName("html")[0];
27         html_doc.style.cssText = "font-size:" + height * 100 / 1125 + "px;" + "overflow-y:"+"hidden;"+"height:"+height+"px;";
28         style += "overflow-y: hidden;";
29         add_tab();
30         $wrapper.style.cssText = style;
31     }
32     
33     
34 }
35 window.onresize = detectOrient;
36 detectOrient();
37 
38 function add_tab(){
39     var clone_tab = $("footer").clone();
40     $("footer").remove();
41     clone_tab.css({"transform":"rotate(-90deg)","transform-origin":"top right"})
42     $("body").append(clone_tab);
43     clone_tab.css({"position":"fixed","right":"1.77rem","bottom":"4rem","left":"auto","top":"0","width":"11.25rem","height":"1.77rem"})
44 }

 

相信这段代码对于前端人员来讲不是很难，可是有一点须要注意的有三点。

　　第一点：

最开始的时候我是为了方便直接旋转的整个的html，这个是时候会有一个问题，就是页面中的fixed定位的元素，定位就无论用了（代码中的<footer>就是做为tab切换放在底部的）；这里附上张鑫旭大神的文章，这个就须要咱们更改了，既然旋转父元素，子元素就无论用了，那咱们就不要旋转父元素了，直接旋转他的兄弟元素就能够了。我这里是旋转的一个叫作#vue的元素，由于个人页面中的其余的内容所有是在这个div当中的。因此我就旋转了这个元素。而后这个时候定位是能够用的，可是样式不对，因此在个人add_tab这个函数中就是在调整这个元素的大小和样式，让他能正常的显示在屏幕的右侧，也就是竖屏的状态下，屏幕的底端。

　　第二点：

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

　　第三点：

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

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

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