For horizontal screen display, not vertical screen.
Experienced you must know that when the user vertical screen open, the prompt said you want to turn the phone is a very silly x thing. At this time if the user does not turn on the phone in the horizontal screen mode, but also to force users to open. This is when users have been impatient to turn off your game.
Now the solution is to write a horizontal div in portrait mode, and then turn it around.
The code is as follows:
<body class="webpBack"> <div id="print"> <p>lol</p> </div></body>
Very simple right, the ultimate ideal is to put lol in a very harmonious cross over.
Okay, here's a look at the CSS that distinguishes the horizontal screen vertical:
@Media screen and (orientation:portrait) {Html{Width: 100%;Height: 100%;padding:0px; " > white;Overflow:Hidden }Body{Width: 100%;Height: 100%;padding:0px; " > red;Overflow:Hidden }#print{Position:absolute;padding:0px; " > yellow; }}@Media screen and (Orientation:landscape) {Html{Width: 100%;Height: 100%;padding:0px; " > white; }Body{Width: 100%;Height: 100%;padding:0px; " > white; }#print{Position:absolute;Top: 0;left: 0; width: 100%; height: 100%; padding:0px; " > yellow; }} #print p{margin: auto; margin-top: 20px; text-align: Center;} Plainly, is to put print this div in the vertical screen mode, horizontal screen state unchanged. So under portrait, it's not defined by its wide height. will be through the following JS to fill.
var width =Document.documentElement.clientWidth; var height =Document.documentElement.clientHeight;if (Width < height) {console.log (width + " + height); $print = $ ( ' #print '); $print.height (width); $print.css ( 2); $ ' left ', 0-(height-width)/ 2); $print.css ( ' transform ', rotate (90deg) '); $print.css ( ' Transform-origin ', ' 50% 50% '); } Here we first get the width of the available area of the screen, and then according to the relationship between the width and height to determine whether it is a horizontal screen or vertical screen. If it is a vertical screen, align and rotate the width of the print div.
The final effect is as follows:
Finally, the consequence of this is that if the user's mobile phone rotation screen button is open, then when the phone cross over, it will cause a certain tragedy. The solution is as follows:
var evt ="Onorientationchange" in window?"Orientationchange":"Resize"; Window.addeventlistener (EVT,function() {console.log (evt);var width = document.documentElement.clientWidth;var height = document.documentElement.clientHeight;$print = $ (' #print ');if (width > height) {$print. Width (width);$print. Height (height);$print. CSS (' Top ',0);$print. CSS (' Left ',0);$print. CSS (' Transform ', $print. css ( ' Transform-origin ', ' 50% 50% '); } else{ $print. width (height); $print. Height (width); $print. css ( ' top ', (height-width)/ 2); $print. css ( ' left ', 0-( Height-width)/2); $print. css ( ' transform ', rotate (90deg) '); $print. css ( ' Transform-origin ', ' 50% 50% '); }}, false); How the mobile side makes the page force horizontal screen
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
