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); width: 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"
     });
 }