强制网站仅在横屏模式下显示

Question

我希望我的网站只能以横向模式显示，这是否可能？无论用户手中的设备方向如何，网站始终处于横向模式。我见过iPhone应用程序可以这样工作，但网站能否做到这一点？

- coure2011

---

好问题，但我敢打赌答案是“不可能”，尽管你可以有点作弊：https://dev59.com/D2445IYBdhLWcg3wiq8i#4807047。 - nnnnnn

不是真的。你可以使用CSS变换来模拟它，但这很丑陋，而且我不认为在Android上知道它是否颠倒了。我相信这在这里之前已经讨论过了。 - Dagg Nabbit

是否可以强制网站具有最小宽度：320像素？因此，如果屏幕分辨率较低，则用户需要滚动才能查看整个网站。或者我可以将240像素宽度的内容缩放到320像素吗？ - coure2011

我不确定这个链接对你有多大帮助，但最新的[2020年1月]功能表明W3C推出了一个新的方向锁定API https://w3c.github.io/screen-orientation/。 - Sarath Sajan

Answer 1

@Golmaal确实回答了这个问题，我只是多说了一些话。

<style type="text/css">
    #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }
</style>

....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

用户可以任意更改设备屏幕方向，但您至少可以向他们发送消息。此示例将在纵向模式下隐藏包装器并显示警告消息，然后在横向模式下隐藏警告消息并显示纵向模式。

我认为这个答案并没有比 @Golmaal 更好，只是对它的赞扬。如果您喜欢这个答案，请确保给 @Golmaal 认可。

更新

最近我一直在使用 Cordova，结果发现当您有访问本机功能的权限时，您可以控制它。

另一个更新

所以，在发布 Cordova 之后，最终效果真的很糟糕。如果您想要 JavaScript，最好使用类似于 React Native 的东西。它真的很棒，我知道它不是纯 web，但是移动端的纯 web 经验有些失败。

- King Friday

---

今天真是太棒了！这是一个非常方便的脚本，可以在小设备上强制横屏模式并显示一个漂亮的消息。 - dhruvpatel

你得到了大部分的功劳，不过你的回答描述得很好，加1天赞赏给你和@Golmaal。 - Hitesh Misro

非常有用，谢谢！值得注意的是，如果将其放在单独的样式表中，似乎无法正常工作。 - Mmm

你的回答比你参考的那个更好。你提供了一个实际的解决方案，并推荐一个易于实现的警告，而不是一些更有创意和问题的东西。另一个“答案”可能会激发你的灵感，但它或多或少只是在自言自语。将其作为评论提及orientation条件组属性的存在会更好。 - Vince

Answer 2

虽然我自己会一直等待答案，但我想知道是否可以通过CSS实现：

@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}

- Golmaal

Answer 3

试试这个，它可能更适合你

#container { display:block; }
@media only screen and (orientation:portrait){
  #container {  
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape){
  #container {  
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}

<div id="container">
    <!-- your html for your website -->
    <H1>This text is always in Landscape Mode</H1>
</div>

这将自动管理甚至旋转。

- Mr. A

---

聪明，但实际效果并不好。当页面被旋转时，许多内容将无法访问，因为只有内容被旋转了，而浏览器本身没有旋转。 - Graham

这将会破坏任何动画效果，并可能破坏页面的移动端响应能力。 - Wissam El-Kik

Answer 4

今日免费次数已满, 请开通会员/明日再来

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}

- Kraken

---

不错的想法.. 在切换竖屏/横屏时有任何伪像/噪点吗？ - hko

Answer 5

这对我有用！

CSS：

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightcyan;
}
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  .container {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

HTML：

   <div className="container">
    {/* your code for your website */}
   </div>

- amboji alur