ipad横竖屏切换，页面适配方法

朱雀 2022-05-19 01:19 663阅读 0赞

如果想始终横屏展示给用户，方法有很多，我也来写几种吧：

1.简单粗暴型：当ipad竖屏的时候，给一个蒙层提示，让客户不得不进行横屏操作

// ipad竖屏适配  
    var detectOrient = function() \{  
      var width = document.documentElement.clientWidth,  
          height =  document.documentElement.clientHeight  
      if( width >= height )\{   
           $('.ipad\_t').hide();    //横屏--隐藏蒙层  
      \}  
      else\{  
           $('.ipad\_t').show();  //竖屏--弹出蒙层  
      \}  
    \}  
    window.onresize = detectOrient;  
    detectOrient();

备注：这种方式虽然不是太友好，但简单有效，适当选择！

2.友好型：当ipad竖屏的时候，对根wrap进行旋转操作

// ipad竖屏适配  
    var detectOrient = function() \{  
      var width = document.documentElement.clientWidth,  
          height =  document.documentElement.clientHeight,  
          $wrapper =  document.getElementById("J\_wrapper"),  
          style = "";  
      if( width >= height )\{   
          style += "width:" + width + "px;";   
          style += "height:" + height + "px;";  
          style += "-webkit-transform: rotate(0); transform: rotate(0);";  
          style += "-webkit-transform-origin: 0 0;";  
          style += "transform-origin: 0 0;";  
      \}  
      else\{  
          style += "width:" + height + "px;";  
          style += "height:" + width + "px;";  
          style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";  
          style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";  
          style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";  
      \}  
      $wrapper.style.cssText = style;  
    \}  
    window.onresize = detectOrient;  
    detectOrient();

备注：这种方式有个大坑，由于对根wrap使用了transform，所以，如果其子元素用fixed定位的话，会使fixed属性失效（虽然fixed属性很顽强，但是一物降一物啊--父元素有transform的时候fixed会失效）

3.这种是最完美的，就是严格意义上的适配，两套CSS，如果是竖屏的话用一套，横屏的话用另一套

@media screen and (orientation: portrait) \{  
      /\*竖屏 css\*/  
    \}  
    @media screen and (orientation: landscape) \{  
      /\*横屏 css\*/  
    \}