Im Allgemeinen verwenden mobile Spiele ein horizontales Bildschirmdesign mit einem größeren Betrachtungswinkel und einem besseren Spielerlebnis.
Kürzlich arbeitet das Unternehmen an einem Parkour-Spiel ähnlich wie Tiantiankupao, das einen horizontalen Bildschirm erfordert. Stellen Sie sich vor, wenn ein Benutzer Ihre Spieladresse öffnet und Sie den Benutzer auffordern, den Querformatmodus auf seinem Mobiltelefon zum Spielen einzuschalten, wird der Benutzer ungeduldig sein und Ihr Spiel ausschalten.
Dann ist die einzige Lösung, die mir einfällt, die Erzwingung eines horizontalen Bildschirms.
1. Designidee: Im Hochformat ist die Standardanzeige der horizontale Bildschirm. Wenn der Benutzer den horizontalen Bildschirmmodus manuell aktiviert, wird der horizontale Bildschirmmodus der Seite automatisch in die horizontale Bildschirmanzeige umgewandelt.
2. Umsetzung:
(1) Erstens ist das Meta-Tag
Um die Seitenanzeige besser an den mobilen Bildschirm anzupassen, müssen wir die Breite der Seite an die Breite des mobilen Bildschirms anpassen und die Benutzer-Zoom-Schnittstelle deaktivieren
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
(2) Dann gibt es noch die HTML-Struktur
Da wir hier nur Tests durchführen, stellen wir hier nur eine einfache Codestruktur ein.
<body>
Loading
</body>Um den Effekt zu verstärken, fügen Sie vier horizontale Linien an den vier Ecken der Seite hinzu.
<body>
Loading
<div></div>
<div></div>
<div></div>
<div></div>
</body>(3) CSS-Stil
Der horizontale Bildschirmstil verwendet hauptsächlich die Drehung und Übersetzung der Transformation, um die horizontale Bildschirmanzeige im vertikalen Bildschirmzustand zu realisieren, während der horizontale Bildschirmstatus immer noch die horizontale Bildschirmanzeige ist. Wenn der Körper auf dem Bildschirm umgeschaltet wird, ändern sich Breite und Höhe werden von js gesteuert
* {
/*初始化样式*/
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%);
}
}Es gibt auch Eckstile
/*测试 边边角角*/
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;
}(4) js-Code
Bestimmen Sie die Breite und Höhe des Körpers anhand der von HTML initialisierten Breite und Höhe
<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>3. Alle Codes
<!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>