时间戳

首页 > 解决方案 > 使移动视图在 +90 度的横向上保持纵向模式

javascript - 使移动视图在 +90 度的横向上保持纵向模式

问题描述

问题：

要查看问题：

我的代码： 

(function() {

  function myFunction() {
    var wSH = window.screen.height;
    var wI = window.innerHeight;
    var dBC = document.body.clientHeight;
    var wO = window.orientation;
    document.getElementById("wSH").textContent = wSH;
    document.getElementById("wI").textContent = wI;
    document.getElementById("wO").textContent = wO;
    document.getElementById("dBC").textContent = dBC;

    var bodyDocument = document.body;
    var iosDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) &&
      !window.MSStream;
    if (window.matchMedia('(orientation: landscape)').matches &&
      (
        (window.screen.height < 425) /* for android */ ||
        (iosDevice && window.innerHeight < 425) /* for iOS */
      )
    ) {
      bodyDocument.classList.add('rotator-right');
    } else {
      bodyDocument.classList.remove('rotator-right');
    }

    document.getElementsByTagName('body')[0].style.display = 'none';
    setTimeout(function() {
      document.getElementsByTagName('body')[0].style.display = 'block';
    }, 200);

    setTimeout(function() {
      //console.log('inside rotator-right, with document.body.scrollHeight :', document.body.scrollHeight);
    }, 100);

  }
  window.addEventListener("resize", myFunction);
  myFunction();


})();
@media screen and (orientation:landscape) {
  .rotator {
    transform: scale(0.95) rotate(270deg);
    transform-origin: top right;
    position: relative;
    top: 0px;
    left: -100vh;
    height: 100vw;
    width: 100vh;
    overflow-y: hidden;
  }
  .rotator-right {
    transform: scale(0.93) rotate(90deg);
    transform-origin: top right;
    position: relative;
    width: 100vh;
    top: 50vw;
    left: 42vw;
    overflow-y: hidden;
  }
}
<body id='body'>
  <div class='container'>
    <p>Click the button to display this frame's height and width.</p>
    <p id="demo"></p>
    <p>window.scroll.height :
      <span id="wSH"></span>
    </p>
    <p>window.innerHeight :
      <span id="wI"></span>
    </p>
    <p>document.body.clientHeight :
      <span id="dBC"></span>
    </p>
    <p>window.orientation :
      <span id="wO"></span>
    </p>
    <button>Try it</button>
    <br />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac magna nec nisi accumsan blandit. Quisque feugiat commodo sapien quis pharetra. Sed elit justo, volutpat ac eleifend eu, aliquet in orci. Proin fermentum purus nec ante molestie sodales.
      Cras malesuada nunc purus, id iaculis magna suscipit nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam pulvinar eu lectus eu sollicitudin. Integer mauris sem, posuere vel est a, eleifend pulvinar
      lectus. Duis sapien velit, tristique imperdiet purus nec, scelerisque porta massa. Proin commodo faucibus purus, in volutpat lectus maximus sed. Suspendisse potenti.
    </p>
    <p>
      Curabitur maximus elementum nibh, at rhoncus dolor auctor in. Donec ultrices enim ac est sollicitudin euismod. Mauris tempor eget dolor sit amet consequat. Suspendisse volutpat efficitur eros, vitae imperdiet tellus. Vestibulum aliquam nunc eget ante
      porta gravida. Aliquam cursus fermentum accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur condimentum tempus mollis. Suspendisse luctus posuere sapien, ut pharetra lacus eleifend ut.
    </p>
    <p>
      Morbi eu finibus quam. Morbi pharetra mollis diam id hendrerit. Etiam rhoncus, dolor quis hendrerit consectetur, est urna efficitur erat, in vestibulum nunc erat eget sapien. Curabitur ut massa semper, feugiat quam eu, rhoncus tortor. Ut quis convallis
      diam, et euismod sem. Cras volutpat libero id nulla varius, at egestas elit consectetur. Nulla posuere neque risus, eu mollis dolor vehicula ut. Donec a ipsum eu justo malesuada lacinia in porta nibh. Aenean risus erat, molestie elementum eros vitae,
      tempor porta lacus. Fusce et bibendum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vel est ac justo vehicula commodo eget eget magna. Etiam vitae aliquet eros, rutrum porta ligula. Nulla at
      fringilla lacus, sed commodo justo. Aenean imperdiet maximus tortor sed volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <p>
      Curabitur finibus dictum condimentum. Nulla scelerisque dui elit, sit amet lobortis tellus mollis ut. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ac ex sapien. Maecenas ac pellentesque nisi, id mattis
      ligula. Sed lacinia feugiat ultricies. Sed ultrices facilisis efficitur. Vestibulum quis libero nec quam convallis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus neque, sodales sit amet facilisis eu, viverra vel nulla.
      Nullam nec dapibus metus. Aenean pulvinar molestie dolor. In hac habitasse platea dictumst.
    </p>
    <p>
      Nunc commodo magna id nisl ultricies porta. Nulla eget purus et mi malesuada hendrerit. Aenean euismod mauris placerat est dapibus, venenatis posuere lacus fermentum. Cras purus lorem, tristique non semper sit amet, pulvinar a ligula. Vestibulum ante
      ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ultricies ultrices posuere. Nulla eu pellentesque ante. Curabitur consequat odio eget purus vestibulum, nec vestibulum lacus mollis. Etiam cursus, ipsum vehicula
      auctor rhoncus, diam massa fermentum nibh, ac tincidunt neque arcu et risus.</p>
    <hr />
    <p>--------- This is the last line ---------</p>
  </div>
</body>

标签： javascripthtmlcssresponsive-designlandscape-portrait

解决方案

什么地方出了错？

我发现出了什么问题。当您使用 a 向左旋转 90 度（-90 度）时transform-origin: top right，框将包含html向右扩展，从而使其可以向右滚动。

但是，当您使用 a 向右旋转 90 度（+90 度）时transform-origin: top left，框会将包含内容扩展html到左侧，这不会导致它可以向左滚动。在 SO上已经讨论过这个特定的场景。请尝试阅读它。

解决方法

知道了这一点，我们可以改为操纵transform-origintobottom left使框以这样的方式旋转，使其向右扩展包含html并导致滚动条出现。但是，这样做，我们需要调整它以使位置正确。为此，我们可以使用另一个transform函数，即translate. 我改变了你.rotator和.rotator-right类来利用translateX和translateY旋转之前，这样旋转后的位置是正确的。

（我建议玩transform功能。尝试制作一个之前适用rotate的translate项目和一个之前适用translate的项目rotate。结果是不同的！你会学到新的东西。）

我建议尝试调整transform和overflow-y值，以了解我的意思是将包含在和类html上左右扩展的框。.rotator.rotator-right

这是一个有效的解决方案。.rotator-right我在和上添加了配置您的 CSS 部分.rotator。您不再使用left或top不再调整位置，而是让该控制transform完全发挥作用。尝试全屏运行并在浏览器上启用移动模式。

function myFunction() {
  var wSH = window.screen.height
  var wI = window.innerHeight
  var dBC = document.body.clientHeight
  var wO = window.screen.orientation.type
  document.getElementById("wSH").textContent = wSH
  document.getElementById("wI").textContent = wI
  document.getElementById("wO").textContent = wO
  document.getElementById("dBC").textContent = dBC

  var bodyDocument = document.body;
  var iosDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) &&
    !window.MSStream;
  if (window.matchMedia('(orientation: landscape)').matches &&
    (
      (window.screen.height < 425) /* for android */ ||
      (iosDevice && window.innerHeight < 425) /* for iOS */
    )
  ) {
    bodyDocument.classList.add('rotator-right')
  } else {
    bodyDocument.classList.remove('rotator-right')
  }

  document.getElementsByTagName('body')[0].style.display = 'none';
  setTimeout(function() {
    document.getElementsByTagName('body')[0].style.display = 'block';
 if (bodyDocument.classList.contains('rotator-right')) window.scrollTo(bodyDocument.getBoundingClientRect().width, 0)
  }, 200);
}
window.addEventListener("resize", myFunction);
myFunction();
* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
}

p {
  margin: 0;
  padding: 16px 0;
}

@media screen and (orientation:landscape) {
  .rotator {    
    transform-origin: top right;
    width: 100vh;
    
    /* Try playing with these properties to see the transformation */
    /* Use scale at the very end of transform if needed */
    transform: translateX(-100%) rotate(-90deg);
    transition: all .5s ease;
    overflow-y: hidden;
  }
  .rotator-right {
    transform-origin: bottom left;
    width: 100vh;
    
    /* Try playing with these properties to see the transformation */
    /* Use scale at the very end of transform if needed */
    transform: translateY(-100%) rotate(90deg) scale(0.85);
    transition: all .5s ease;
    overflow-y: hidden;
  }
}
<body id='body'>
  <div class='container'>
    <p>Click the button to display this frame's height and width.</p>
    <p id="demo"></p>
    <p>window.scroll.height :
      <span id="wSH"></span>
    </p>
    <p>window.innerHeight :
      <span id="wI"></span>
    </p>
    <p>document.body.clientHeight :
      <span id="dBC"></span>
    </p>
    <p>window.orientation :
      <span id="wO"></span>
    </p>
    <button>Try it</button>
    <br />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac magna nec nisi accumsan blandit. Quisque feugiat commodo sapien quis pharetra. Sed elit justo, volutpat ac eleifend eu, aliquet in orci. Proin fermentum purus nec ante molestie sodales.
      Cras malesuada nunc purus, id iaculis magna suscipit nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam pulvinar eu lectus eu sollicitudin. Integer mauris sem, posuere vel est a, eleifend pulvinar
      lectus. Duis sapien velit, tristique imperdiet purus nec, scelerisque porta massa. Proin commodo faucibus purus, in volutpat lectus maximus sed. Suspendisse potenti.
    </p>
    <p>
      Curabitur maximus elementum nibh, at rhoncus dolor auctor in. Donec ultrices enim ac est sollicitudin euismod. Mauris tempor eget dolor sit amet consequat. Suspendisse volutpat efficitur eros, vitae imperdiet tellus. Vestibulum aliquam nunc eget ante
      porta gravida. Aliquam cursus fermentum accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur condimentum tempus mollis. Suspendisse luctus posuere sapien, ut pharetra lacus eleifend ut.
    </p>
    <p>
      Morbi eu finibus quam. Morbi pharetra mollis diam id hendrerit. Etiam rhoncus, dolor quis hendrerit consectetur, est urna efficitur erat, in vestibulum nunc erat eget sapien. Curabitur ut massa semper, feugiat quam eu, rhoncus tortor. Ut quis convallis
      diam, et euismod sem. Cras volutpat libero id nulla varius, at egestas elit consectetur. Nulla posuere neque risus, eu mollis dolor vehicula ut. Donec a ipsum eu justo malesuada lacinia in porta nibh. Aenean risus erat, molestie elementum eros vitae,
      tempor porta lacus. Fusce et bibendum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vel est ac justo vehicula commodo eget eget magna. Etiam vitae aliquet eros, rutrum porta ligula. Nulla at
      fringilla lacus, sed commodo justo. Aenean imperdiet maximus tortor sed volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <p>
      Curabitur finibus dictum condimentum. Nulla scelerisque dui elit, sit amet lobortis tellus mollis ut. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ac ex sapien. Maecenas ac pellentesque nisi, id mattis
      ligula. Sed lacinia feugiat ultricies. Sed ultrices facilisis efficitur. Vestibulum quis libero nec quam convallis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus neque, sodales sit amet facilisis eu, viverra vel nulla.
      Nullam nec dapibus metus. Aenean pulvinar molestie dolor. In hac habitasse platea dictumst.
    </p>
    <p>
      Nunc commodo magna id nisl ultricies porta. Nulla eget purus et mi malesuada hendrerit. Aenean euismod mauris placerat est dapibus, venenatis posuere lacus fermentum. Cras purus lorem, tristique non semper sit amet, pulvinar a ligula. Vestibulum ante
      ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ultricies ultrices posuere. Nulla eu pellentesque ante. Curabitur consequat odio eget purus vestibulum, nec vestibulum lacus mollis. Etiam cursus, ipsum vehicula
      auctor rhoncus, diam massa fermentum nibh, ac tincidunt neque arcu et risus.</p>
    <hr />
    <p>--------- This is the last line ---------</p>
  </div>
</body>

我的一个不相关的问题：您使用此代码来检测设备是否为 iOS /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;：. 我似乎找不到合适的文档，所以它可能是不准确的代码。此外，来自MDN 关于用户代理嗅探：

值得重申：使用用户代理嗅探几乎不是一个好主意。您几乎总能找到一种更好、更广泛兼容的方法来解决您的问题！

此外，Safari (iOS) 似乎也支持window.screen.height.

推荐阅读