通过css的transform
来实现旋转,不过旋转后的一些位置计算就需要重新调整了。
transform
的 rotate 是通过中心点进行旋转的,可以计算出来需要移动的距离。
//获取当前宽高,计算,并旋转
var width = window.innerWidth,height = window.innerHeight;
if(width < height){
var diff = height/2-width/2;
document.body.style.width = height+'px';
document.body.style.height = width+'px';
document.body.style.transform='rotate(90deg) translate('+diff+'px,'+diff+'px)';
}
//绑定事件
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function () {
setTimeout(function(){
var width1 = window.innerWidth,height1 = window.innerHeight;
if(width1<height1) {
var diff1 = height1/2-width1/2;
document.body.style.width = height1+'px';
document.body.style.height = width1+'px';
document.body.style.transform='rotate(90deg) translate('+diff1+'px,'+diff1+'px)';
} else {
document.body.style.width = '100%';
document.body.style.height = '100%';
document.body.style.transform='';
}
},400)
})
转载请注明出处: https://chrunlee.cn/article/h5-hrizontal-screen-in-js.html