關於移動端頁面強制豎屏

　　最近工做中寫了一個移動端的頁面，原本是沒什麼的，可是有一個要求感受很奇怪，從前也沒有遇到過，就是我寫的這個頁面須要放在一個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定位解決的，可是由於旋轉了，這個失效了，因此就沒有好的辦法了。附上我上個文章的連接。在豎屏狀態下是沒問題的。