記下一些項目中的總（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（有點擊事件，點擊位置錯位問題）還需要單獨處理