正文

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

IP云
IP云V管理员/12 阅读
08/04
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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