關於解決微信移動端橫豎屏切換的問題。

豎屏的頁面就不用說了，主要講講橫屏的，目前主要有兩種方法，一種是，當豎屏的時候，直接彈出一個提示浮層鋪滿整個頁面，橫屏的時候，讓提示浮層消失，頁面正常顯示，這種是在必須解除手機鎖屏的前提下才行。

方法很簡單，采用css 判斷你手機橫豎屏，橫屏，讓提示浮層隱藏，豎屏顯示

代碼如下

@media screen and (orientation: portrait) {
  #errorScreen {
    display: block; } }
@media screen and (orientation: landscape) {
  #errorScreen {
    display: none; } }
#errorScreen {
  background: url("../img/shupin.jpg");
  background-size: 100% 100%;
  z-index: 10000; }

其中#errorScreen，就是要顯示，隱藏的浮層，注意把他的z-index設置最高；

使用js 判斷其屏幕是否發生變化

$(window).resize(function () {

                setTimeout(function(){
                    page.resize();
                },100)
            });   

     
window.addEventListener("orientationchange", function() {              
　　setTimeout(function(){                 
 　　　　page.resize();              
　　},100)
}, false);

上面兩個方法隨便選一個就可以了，

 

在頁面寬高變化的時候，需要刷新頁面（就是重新計算屏幕的寬高，重置css）執行page.resize();

 resize: function () {
            pageH = $(window).height();
            pageW = $(window).width();
            $(".page").width(pageW).height(pageH);
        }

其實到這里，基本就結束了，這種做法代碼簡單，但是存在很多的局限性，第一個，就是必須要手機解除鎖屏狀態，第二種就是，橫屏后，在微信端打開的頁面，iphone機還好一點，安卓機的h5的title高度太高，導致整個頁面顯得很長，這樣頁面看起來很不爽。

 

所以下面介紹第二種方法，在不鎖屏，和鎖屏的狀態下，同時共存，就是，鎖屏了。頁面看起來還是橫屏的，橫屏狀態下還是橫屏，無論你怎么切換，都是橫屏。這就沒必要寫橫屏提示的覆蓋層了。（當然也可以寫個，前期出現個幾秒，溫馨提示下）

其實做起來也很簡單，

直接上代碼，就在上面的基礎上改把，首先上面的css代碼就不要了。

直接上代碼：

css加一句

.page_Box {
  -wibkid-transition: -webkit-transform 0.5s;
  -webkit-transform-origin: 0 0; }

這個是page_Box 是整個頁面的最外層div,目的就是讓他旋轉，這里要設置他的旋轉中心，方便后面做位移的計算，當然你也可以不設置。。。那你就慢慢算吧

js要改下

resize: function () {
            pageH = $(window).height();
            pageW = $(window).width();
            $(".page").width(pageW).height(pageH);
            
            if (pageH > pageW) {
                $(".page").width(pageH).height(pageW);
                $(".page_Box").css('-webkit-transform', 'translate(' + pageW + 'px,0px) rotateZ(90deg)')
            } else {
                $(".page_Box").css('-webkit-transform', '');       
            }
        }

其實到這里，基本上就寫結束了，原理就是，豎屏的狀態下，頁面旋轉90度，橫屏的狀態下，就跟第一種一樣，這樣，無論橫屏豎屏，鎖屏解屏，頁面在手機里顯示的都是橫屏。但是這里還存在一個缺陷，就是鎖屏狀態下，頁面旋轉了90度，但是要是我將手機倒過來，頁面就不會跟着再旋轉180度了，這里可以通過陀螺儀試試，因為我這就沒准備讓他那么這么靈活的轉，所以就沒做了，誰Y的讓你鎖屏的，鎖屏的就一動不動，嚯嚯嚯