关于解决微信移动端横竖屏切换的问题。

竖屏的页面就不用说了，主要讲讲横屏的，目前主要有两种方法，一种是，当竖屏的时候，直接弹出一个提示浮层铺满整个页面，横屏的时候，让提示浮层消失，页面正常显示，这种是在必须解除手机锁屏的前提下才行。

方法很简单，采用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的让你锁屏的，锁屏的就一动不动，嚯嚯嚯