近想 做一个 手机游戏 页面,所以就 先攻克 手机横屏的 难关。
需求
1. 在竖屏 条件 下默认是 横屏显示的。
2. 即使用户 开了 横屏模式,界面的 横屏模式 自动转换 过来。
实现
1.html 结构
这里就 简单 放一个文字,作为测试 的元素
<body>
Loading
</body>
2.meta 标签
这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度,这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面。
目的是 让界面显示 更加适应 手机屏幕。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
3. css代码
关于横屏的 样式 就主要是 利用 transform 的 旋转 和 平移 来改变 竖屏样式。
对于横屏的 样式 就保持不变
对于 body 在 屏幕转换 时,宽高的 改变,就用 JS 来控制
* {
/*初始化样式*/
margin: 0;
padding: 0;
}
html {
/*用于 获取 屏幕的可视宽高*/
width: 100%;
height: 100%;
overflow: hidden;
}
body {
/*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
/*用于 测试的 样式*/
background-color: #444;
color: #FFF;
letter-spacing: 4px;
font-size: 28px;
/*文字居中*/
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (orientation:portrait) {
/*竖屏样式*/
body {
transform-origin: 0 0;
transform: rotateZ(90deg) translateY(-100%);
}
}
4. JS 代码
通过 html 初始化的 宽高 来确定 body 的宽高
目前为止 就 能够实现 移动端 强制 横屏的 要求了。
(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)
})();
另外. 合并后的测试html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style type="text/css">
* {
/*初始化样式*/
margin: 0;
padding: 0;
}
html {
/*用于 获取 屏幕的可视宽高*/
width: 100%;
height: 100%;
overflow: hidden;
}
body {
/*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
/*用于 测试的 样式*/
background-color: #444;
color: #FFF;
letter-spacing: 4px;
font-size: 28px;
/*文字居中*/
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (orientation:portrait) {
/*竖屏样式*/
body {
transform-origin: 0 0;
transform: rotateZ(90deg) translateY(-100%);
}
}
/*测试 边边角角*/
div {
background-color: #F00;
position: fixed;
height: 2px;
width: 100px;
}
div:nth-of-type(1){
top: 0;
left: 0;
}
div:nth-of-type(2){
top: 0;
right: 0;
}
div:nth-of-type(3){
bottom: 0;
left: 0;
}
div:nth-of-type(4){
bottom: 0;
right: 0;
}
</style>
</head>
<body>
Loading2
<div></div>
<div></div>
<div></div>
<div></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>