手机强制横屏

<!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">
    <!-- 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);

})


阅读更多
文章标签: 手机强制横屏
个人分类: 手机强制横屏
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭