最近工作中寫了一個移動端的頁面，本來是沒什麼的，但是有一個要求感覺很奇怪，從前也沒有遇到過，就是我寫的這個頁面需要放在一個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定位來解決的，但因為旋轉了，這個失效了，所以就沒有好的辦法了。在垂直螢幕狀態下是沒問題的。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。