手机强制横屏

谁践踏了优雅 2023-10-17 19:11 62阅读 0赞

<!DOCTYPE html>  
<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">  
  
  
<script src="js/jquery-3.2.1.min.js"></script>  
<script src="js/index.js"></script>

</head>

</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);  
  
\})