Okay, my test page has the following structure:
<body class= "Webpback" > <p id= "print" > <p>lol</p> </p></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%; Background-color:white; Overflow:hidden; } body{width:100%; height:100%; background-color:red; Overflow:hidden; } #print {Position:absolute; Background-color:yellow; }} @media screen and (orientation:landscape) {html{width:100%; height:100%; Background-color:white; } body{width:100%; height:100%; Background-color:white; } #print {Position:absolute; top:0; left:0; width:100%; height:100%; Background-color:yellow; }} #print p{Margin:auto; margin-top:20px; Text-align:center; }Plainly, is to put the print this p 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. 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% '); }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 p.
The final effect is as follows:
Vertical screen
Horizontal screen
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 ', ' none '); $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); 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
