關於移動端頁面強制豎屏

首先是判斷橫屏的狀態，使用的一下的**：

1
function
orient()  else
if(window.orientation == 0 || window.orientation == 180) 17}
18//
頁面載入時呼叫
19         $(function
() );
22//
使用者變化螢幕方向時呼叫
23         $(window).on('orientationchange', function
(e) );

1
//利用 css3 旋轉 對根容器逆時針旋轉 90 度 強制使用者進行豎屏顯示
2var detectorient = function
()  else );
26var 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;";
29add_tab();31}
323334}
35 window.onresize =detectorient;
36detectorient();
3738
function
add_tab())
43     clone_tab.css()
44 }

相信這段**對於前端人員來說不是很難，但是有一點需要注意的有三點。

第一點：

最開始的時候我是為了方便直接旋轉的整個的html，這個是時候會有乙個問題，就是頁面中的fixed定位的元素，定位就不管用了（**中的就是作為tab切換放在底部的）；這裡附上張鑫旭大神的文章，這個就需要我們更改了，既然旋轉父元素，子元素就不管用了，那我們就不要旋轉父元素了，直接旋轉他的兄弟元素就可以了。我這裡是旋轉的乙個叫做#vue的元素，因為我的頁面中的其他的內容全部是在這個div當中的。所以我就旋轉了這個元素。然後這個時候定位是可以用的，但是樣式不對，所以在我的add_tab這個函式中就是在調整這個元素的大小和樣式，讓他能正常的顯示在螢幕的右側，也就是豎屏的狀態下，螢幕的底端。

第二點：

第二點需要注意的是，應為我用的是rem布局，多以我會更改html的font-size，但是這個時候就要小心了，當我們旋轉過來之後，寬變成了高，高變成了寬，所以我們需要用height來計算根目錄的字型大小。

第三點：

第三點就是在程式中註明的，需要我們注意旋轉的中心，預設的旋轉中心是在所選元素的中心點。多以我們要改變旋轉的中心點。旋轉之後還要把html的overflow-y：hidden。否則就會出現多餘的滾動。

這樣的話，基本上就把整個頁面旋轉過來了，並且把底部的fixed定位的元素再次定位成功了。比較幸運的是我們用的彈窗是用的layui的彈窗，再把這個彈窗旋轉90度就可以了。

ps：最後發現一點問題是沒辦法解決的，就是當頁面夠長的時候，也就是有滾動條的時候，彈窗出來以後，滑動後面的遮罩層的話，後面的頁面會向上滑動。這個本來是可以解決的，我上面的這個文章就是利用fixed定位解決的，但是因為旋轉了，這個失效了，所以就沒有好的辦法了。附上我上個文章的鏈結。在豎屏狀態下是沒問題的。

關於移動端頁面強制豎屏

關於移動端頁面強制豎屏的方法

移動端強制使用者豎屏顯示

移動端如何強制頁面橫屏

關於移動端頁面強制豎屏

關於移動端頁面強制豎屏的方法

移動端 強制使用者豎屏顯示

移動端如何強制頁面橫屏

相關推薦

移動端強制使用者豎屏顯示