H5竖屏下横屏显示

有一天经理说:哎~那个谁,咱这个页面能不能做成,竖屏横着显示,横屏也横这显示的…


想一想大概的实现思路是这样的

  1. 选取一个 dom 节点比如 body ;
  2. css 赋值宽等于实际的高,高等于实际的宽;
  3. 利用 css3 transform rotate 属性选转90度;
  4. js 监听 onorientationchange 旋转控制样式;

核心css

测试机型 iphone6/7/8 375*667

body{
width: 667px;
height: 375px;
transform: rotate(90deg);
transform-origin: 0px 0px 0px;
margin: 0px 0px 0px 375px;
padding: 0px;
}

核心js

主要是赋予 dom 节点 css 宽高,监听屏幕旋转做不同的样式更换

//竖屏默认横屏显示
if ($('body').width() < $('body').height()) {
$('body').css({
'width': $('body').height(),
'height': $('body').width(),
'transform': 'rotate(90deg)',
'transform-origin': '0px 0px 0px',
'margin': '0',
'margin-left': $('body').width(),
'padding': '0'
})
} else {
$('body').attr('style', '')
};

//转屏控制
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
if (window.orientation === 180 || window.orientation === 0) {
//设备竖屏状态
$('body').css({
'width': $('body').width(),
'height': $('body').height(),
'transform': 'rotate(90deg)',
'transform-origin': '0px 0px 0px',
'margin': '0',
'margin-left': $('body').height(),
'padding': '0'
})
}
if (window.orientation === 90 || window.orientation === -90) {
//设备横屏状态
$('body').attr('style', '')
}
}, false);

效果如下:
竖屏情况下
横屏情况下