强制网站仅以横向模式显示

Question

我想仅以横向模式显示我的网站，是否可能？用户手中的设备方向无关紧要，但网站将始终处于横向模式。我看过像这样的iPhone应用程序，但是这可以在网站上完成吗？

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这样的东西。这真的很神奇，我知道它不是纯粹的网络，而是移动设备上的纯网络体验失败。

Answer 2

虽然我自己会在这里等待答案，但我想知道是否可以通过CSS完成：

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

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

Answer 3

试试这可能更适合您

＆＃13;

＆＃13;

#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);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这将自动管理均匀旋转。

Answer 4

我必须使用主容器的宽度：

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