<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 页面窗口自动调整到设备宽度,并禁止用户缩放页面 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<!-- 忽略将页面中的数字识别为电话号码 -->
<meta name="format-detection" content="telephone=no"/>
<!-- 忽略对邮箱地址的识别 -->
<meta name="format-detection" content="email=no"/>
<!-- 忽略识别页面中的地址 -->
<meta name="format-detection" content="adress=no"/>
<title>动漫跑</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<!-- Link Swiper's CSS -->
<!-- <link rel="stylesheet" href="css/swiper.css"> -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/index.js"></script>
</head>
<body class="webpBack">
<div id="print">
<p>lol</p>
</div>
</body>
</html>
css代码
*{margin:0;padding:0;}
html, body {position: relative;height: 100%;width:100%;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fff; opacity:1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fff;opacity:1;
}
textarea:-ms-input-placeholder{
color: #fff;opacity:1;
}
textarea::-webkit-input-placeholder{
color: #fff;opacity:1;
}
ul,ol{list-style:none;padding:0;}
body {background: #fff;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;margin:0 auto;text-align:center;text-shadow: none!important;}
html {font-size: 62.5%; /* 10¡Â16=62.5% */ }
@media only screen and (min-width: 481px){
html {
font-size: 94%!important; /* 15.04¡Â16=94% */
}
}
@media only screen and (min-width: 561px){
html {
font-size: 109%!important; /* 17.44¡Â16=109% */
}
}
@media only screen and (min-width: 641px){
html {
font-size: 125%!important; /* 20¡Â16=125% */
}
}
/*@media screen and (min-width:321px) and (max-width:375px){
html{font-size:11px}
}*/
.fl{float: left;}
.fr{float: right;}
@keyframes audio-in{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@-moz-keyframes audio-in{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@-webkit-keyframes audio-in{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@-o-keyframes audio-in{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.aufrom{
animation: audio-in 2s linear 1s infinite normal;
-moz-animation: audio-in 2s linear 1s infinite normal;
-webkit-animation: audio-in 2s linear 1s infinite normal;
-o-animation: audio-in 2s linear 1s infinite normal;
}
@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;
}
js代码
$(function(){
// w=document.documentElement.clientWidth;
// var h=document.documentElement.clientHeight;
// var swiperbox=$(".swiper-container");
// swiperbox.width(w+"px");
// swiperbox.height(h+"px");
// 移动端点击事件
var startEvt,moveEvt,endEvt;
if("ontouchstart" in window){
startEvt="touchstart";
moveEvt="touchmove";
endEvt="touchend";
}else{
startEvt="mousedown";
moveEvt="mousemove";
endEvt="mouseup";
endOut="mouseout"
}
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');
console.log($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);
})