手机强制横屏

最新推荐文章于 2019-12-06 19:00:42 发布

盏茶作酒

最新推荐文章于 2019-12-06 19:00:42 发布

阅读量963

点赞数

CC 4.0 BY-SA版权

分类专栏：手机强制横屏文章标签：手机强制横屏

本文链接：https://blog.youkuaiyun.com/qq_40999917/article/details/79970178

手机强制横屏专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个响应式网页布局案例，通过使用HTML和CSS技术确保网站在不同设备上都能正常显示。根据屏幕方向的变化调整元素大小和位置，实现良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

})