console 命令行工具 X clear

console

<!DOCTYPE html>
<html>
  <head>
    <title>操作指南</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" name="viewport" />

    </head>


<body >
     <div id="gyroContain">
               <div style="border-top:10px solid #f00;border-left:5px solid #f00;height:100px;width:100%;">操作指南操作指南操作指南操作指南</div>
        </div>
  </body>
</html>


<script>
    // 试试横屏
    let width = document.documentElement.clientWidth;
    let height = document.documentElement.clientHeight;
    if (width < height) {
        console.log(width + "哈哈哈 " + height);
        $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%');
    }
    var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    console.log(evt, 'evt')
    window.addEventListener(evt, function() {
        // window.localtion.reload();
       setTimeout(function(){
        var width =document.documentElement.clientWidth;
        var height = document.documentElement.clientHeight;
 
        $print = $('#print');
        $videoIntroduce=$('#videoIntroduce')
        $toVideoBack=$('#toVideoBack')
        $backgroundImg=$('.backgroundImg')
        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%'); } }, 500) }, false);
</script>

@media screen and (orientation: portrait) {
    html{
        /* width : 100vmin;
        height : 100vmax; */
      transform-origin: top left;
        transform: rotate(90deg) translate(0,-100vmin);
      overflow-x:hidden;
    }
  body{
    overflow-x:hidden;
  }
    /* body{
            width : 100vmin;
            height : 100vmax;
    }
    #gyroContain{
        width : 100vmax;
        height : 100vmin;
        transform-origin: top left;
        transform: rotate(90deg) translate(0,-100vmin);
    } */
}
/* @media screen and (orientation: landscape) {
    html{
        width : 100vmax;
        height : 100vmin;
    }
    body{
        width : 100vmax;
        height : 100vmin;
    }
    #gyroContain{
        width : 100vmax;
        height : 100vmin;
    }
} */

本项目引用的自定义外部资源

jquery.min.js