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"

     });

 }