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

css3旋转模拟手机横屏。

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

注意：

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

代码：

/*强制横屏*/
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 ce
4000
nter",
"-webkit-transform-origin": "center center"
});
}

谢谢。