css3 移动端页面全屏旋转，横屏显示。

css3旋转模拟手机横屏。

当手机不能自动旋转时，或有特殊需求。用css3 transform，实现横屏展示。

注意：

 

1. 相关样式注意横屏的显示。
2. touch的手势方向没有变，依旧是原来方向，若有相关插件，注意方向。
3. 此处用的jq，可以写成js。
4. className取镶套的最外层，例如body。

(function () {
  var supportOrientation = (typeof window.orientation === 'number' &&
  typeof window.onorientationchange === 'object');
  var init = function () {
    var orientation;
    var updateOrientation = function () {
      if (supportOrientation) {
        orientation = window.orientation;
        switch (orientation) {
          case 90:
          case -90:
            orientation = 'landscape';
            break;
          default:
            orientation = 'portrait';
            break;
        }
      } else {
        orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
      }
      if (orientation == 'portrait') {
        horizontalScreen('body');
      }
    };
    if (supportOrientation) {
      window.addEventListener('orientationchange', updateOrientation, false);
    } else {
//监听resize事件
      window.addEventListener('resize', updateOrientation, false);
    }
    updateOrientation();
  };
  window.addEventListener('DOMContentLoaded', init, false);
})();

/*强制横屏*/  
function horizontalScreen(className){  
    // transform 强制横屏  
    var conW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;  
    var conH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;  
    // transform: rotate(90deg);  667px; height: 375px;transform-origin:28% 50%;  
    //var iosTopHe = 0;//若有其他样式判断，写于此  
      
    $(className).css({  
        "transform":"rotate(90deg) translate("+((conH-conW)/2)+"px,"+((conH-conW)/2)+"px)",  
        "width":conH+"px",  
        "height":conW+"px",  
        //"margin-top":iosTopHe+"px",  
        // "border-left":iosTopHe+"px solid #000",  
        "transform-origin":"center center",  
        "-webkit-transform-origin": "center center"  
    });  
}