有时候正常竖屏开发满足不了我们的需求,需横屏开发
- 开发思路:把这个body利用css3 transform rotate 旋转90度,js判断竖屏情况下的宽高和横屏下的宽高
示例:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
/*用于 获取 屏幕的可视宽高*/
width: 100%;
height: 100%;
overflow: hidden;
}
body {
/*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
}
@media screen and (orientation:portrait) {
/*竖屏样式*/
body {
transform-origin: 0 0;
transform: rotateZ(90deg) translateY(-100%);
}
}
.box{
width: 100%;
height: 100px;
background: #009F95;
}
</style>
<body>
<div class="box">
内容区
</div>
<script>
(function() {
function resize() {
var body = document.getElementsByTagName('body')[0];
var html = document.getElementsByTagName('html')[0];
var width = html.clientWidth;
var height = html.clientHeight;
var max = width > height ? width : height;
var min = width > height ? height : width;
body.style.width = max + "px";
body.style.height = min + "px";
}
resize();
window.addEventListener("resize", resize)
})();
</script>
</body>
</html>
</html>
</html>
效果图:
注意点:
- 因为横屏开发我们肯定是按照横屏的设计图尺寸来进行开发的,我们实际上是没有旋转手机而是把整个body进行旋转了90度,让 body 初始 width 和 height 就等于页面可视区域的宽高。如果用户手机开启了屏幕旋转那么用户在转动手机后我们的body宽高就发生了改变,与横屏设计图开发出来的效果肯定不适配了。
- 解决方案:
- 如需要就做横竖屏两套UI(既然要求了横屏开发那这种需求应该很少应该只做横屏)。
- js监测窗口变化,监测用户是否旋转了屏幕(window.orientation),如开启手机旋转后屏幕旋转了可以增加遮罩提示用户关闭手机旋转后使用,类似于王者新打开活动页有个横屏提示一样
end~~~
如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读!