<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<style type="text/css">
@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;
width: 100%;
height: 100%;
}
}
@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;
font-style: normal;
}
</style>
</head>
<body>
<body class="webpBack">
<div id="print">
<p>文本</p>
</div>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
function SetHorizontal() {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
$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%');
}
function SetNormal() {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
$print = $('#print');
$print.width(width);
$print.height(height);
$print.css('top', 0);
$print.css('left', 0);
$print.css('transform', 'none');
$print.css('transform-origin', '50% 50%');
}
SetHorizontal();
$(window).resize(function() {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
if(width > height) {
SetNormal();
} else {
SetHorizontal();
}
});
</script>
</body>
</html>
原文链接:https://www.jianshu.com/p/9c3264f4a405