横竖屏的几种方法

最新推荐文章于 2025-04-21 17:11:15 发布

againstAllOdds_

最新推荐文章于 2025-04-21 17:11:15 发布

阅读量1.5k

点赞数 2

文章标签： html5 javascript jquery css3

本文链接：https://blog.youkuaiyun.com/againstAllOdds_/article/details/120526008

版权

1.媒体查询

 @media screen and (orientation: portrait){   //竖屏状态下   }
 @media screen and (orientation: landscape) {   //横屏状态下   }

通过link 实现横竖屏不同的css
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">  竖屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">  横屏

2.js实现强制横屏

(function () {
  function resize() {
    var body = document.getElementsByTagName('body')[0];
    var html = document.getElementsByTagName('html')[0];
    var width = html.clientWidth;
    var height =  html.clientHeight;
    var max = width > height ? width : height;
    var min = width > height ? height : width;
    body.style.width = max + "px";
    body.style.height = min + "px";
  }
  resize();
  window.addEventListener("resize", resize)
})();
原文链接：https://blog.youkuaiyun.com/u010934423/article/details/78867605

3.通过判断宽高来实现横竖屏转换

var event = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(event, function() {
        var width = document.documentElement.clientWidth;
         var height =  document.documentElement.clientHeight;
          $print =  $('#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);
原文链接 ：https://www.jianshu.com/p/9c3264f4a405

4.监听横竖屏

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) {
        alert('竖屏状态！');
 //做相对应的处理
    }
    if (window.orientation === 90 || window.orientation === -90 ){
        alert('横屏状态！');
        //做相对应的处理
    } 
}, false);

原文链接：https://blog.youkuaiyun.com/Neil_1993/article/details/90481352