移動端強制橫屏顯示

記下一些項目中的總（da）結（keng）「移動端強制橫屏顯示頁面」：

開發後效果以下（請原諒小弟沒水果手機）：

思路：經過好用的媒體查詢檢測屏幕方向，若爲豎屏則將頁面 ‘強制橫屏’ 展現，並經過 橫豎屏 動態設置 rem 方式保證適配，那麼如何強制橫屏呢？代碼以下↓↓↓↓↓↓↓↓↓↓↓↓↓

核心代碼：css/js

 1 /*
 2  * 強制橫屏顯示：經過豎屏時旋轉解決橫屏問題  3  *  4  */
 5 @media screen and (orientation: portrait){
 6  #wrapper {
　　　　　　  7  -webkit-transform:rotate(90deg);
 8  -webkit-transform-origin:0% 0%;/*1.重置旋轉中心*/
 9         
10  -moz-transform: rotate(90deg);
11  -moz-transform-origin:0% 0%;
12         
13  -ms-transform: rotate(90deg);
14  -ms-transform-origin:0% 0%;
15         
16  transform: rotate(90deg);
17  transform-origin:0% 0%;
18         
19  width: 100vh;/*2.利用 vh 重置 ‘寬度’ */
20  height: 100vw;/* 3.利用 vw 重置 ‘高度’ */
21         
22  top: 0;
23  left: 100vw;/* 4.旋轉後頁面超出屏幕，重置頁面定位位置 */
24     }
25 }

 1 setRem();  2         window.addEventListener("onorientationchange" in window ? "orientationchange":"resize",function(){  3  setRem();  4  });  5         function setRem(){  6             var html = document.querySelector("html");  7             var width = html.getBoundingClientRect().width;  8             var height = html.getBoundingClientRect().height;  9             //判斷橫屏
10             if(width < height){ 11                 //豎屏
12                 html.style.fontSize = height/16 +"px";
13  }; 14             if(width > height){ 15                 //橫屏
16                 html.style.fontSize = width/16 +"px";
17  } 18             
19         }

 

1.旋轉中心的設置，你們知道默認旋轉中心爲 x，y 的 50% 50%， 若是不重置的話你將看到下面圖片的效果（我一開始看到這個效果心裏只有 ‘啥玩意’ 這三個字）：

2.重置旋轉中心並旋轉90°後的效果（須要經過定位屬性重置頁面位置）：

重置旋轉點後頁面位置旋轉到 ‘紅框’ 位置了，此時將其定位回來就能夠了（left:100vw）

3.此時頁面已經旋轉過來了咱們須要重置頁面的寬高，讓其本來頁面寬度等於旋轉後屏幕的高度（即100vh），本來高度等於屏幕的寬度（即100vw）;這樣頁面就能保證100%撐滿屏幕了；

 4.頁面開發按 橫屏設計圖 和 水果6手機 的分辨率作的 rem 適配，頁面豎屏和橫屏時別忘記重置rem跟標籤rem比值以達到橫豎屏縮放效果相同；

 

 

最後注意：若是頁面中有select（option展開方向問題），canvas（有點擊事件，點擊位置錯位問題）還須要單獨處理