最近工作中寫了一個移動端的頁面，本來是沒什么的，但是有一個要求感覺很奇怪，從前也沒有遇到過，就是我寫的這個頁面需要放在一個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定位解決的，但是因為旋轉了，這個失效了，所以就沒有好的辦法了。附上我上個文章的鏈接。在豎屏狀態下是沒問題的。

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的关于移动端页面强制竖屏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。