Recently, I want to create a mobile game page, so I will first overcome the difficulty of mobile horizontal screen.
demand
1. It is displayed horizontally by default under the condition of vertical screen.
2. Even if the user turns on the horizontal screen mode, the horizontal screen mode of the interface will be automatically converted.
Realization
1.html structure
- Let's simply put a text here as an element of the test
<body>
Loading
</body>2.meta label
- The function here is to make the width of the page fit the width of the mobile screen, so that the width of html can be equal to the width of the corresponding mobile screen. It also prevents the user from scaling the interface.
- The purpose is to make the interface display more suitable for the mobile screen.
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">3. css code
- About the style of horizontal screen, we mainly use the rotation and movement of transform to change the style of vertical screen.
- The style of the horizontal screen remains the same
- JS is used to control the change of width and height of body during screen conversion
* {
/*Initialize style*/
margin: 0;
padding: 0;
}
html {
/*To get the visual width and height of the screen*/
width: 100%;
height: 100%;
overflow: hidden;
}
body {
/*Make the initial width and height of the body equal to the width and height of the visible area of the page*/
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
/*Styles for testing*/
background-color: #444;
color: #FFF;
letter-spacing: 4px;
font-size: 28px;
/*Text Center*/
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (orientation:portrait) {
/*Vertical screen style*/
body {
transform-origin: 0 0;
transform: rotateZ(90deg) translateY(-100%);
}
}4. JS code
- Determine the width and height of the body through the width and height initialized by html
- So far, it has been able to realize the requirement of mandatory horizontal screen on mobile terminal.
(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)
})();In addition, the combined test 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">
* {
/*Initialize style*/
margin: 0;
padding: 0;
}
html {
/*To get the visual width and height of the screen*/
width: 100%;
height: 100%;
overflow: hidden;
}
body {
/*Make the initial width and height of the body equal to the width and height of the visible area of the page*/
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
/*Styles for testing*/
background-color: #444;
color: #FFF;
letter-spacing: 4px;
font-size: 28px;
/*Text Center*/
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (orientation:portrait) {
/*Vertical screen style*/
body {
transform-origin: 0 0;
transform: rotateZ(90deg) translateY(-100%);
}
}
/*Test corner*/
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>