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

Question

我只想以横向模式显示我的网站，这可能吗？用户手中的设备的方向没有关系，但是网站将始终处于横向模式。我已经看到iPhone应用程序可以那样工作，但是可以在网站上完成吗？

Answer 1

@Golmaal确实回答了这个问题，我只是有点冗长。<style type="text/css">&nbsp; &nbsp; #warning-message { display: none; }&nbsp; &nbsp; @media only screen and (orientation:portrait){&nbsp; &nbsp; &nbsp; &nbsp; #wrapper { display:none; }&nbsp; &nbsp; &nbsp; &nbsp; #warning-message { display:block; }&nbsp; &nbsp; }&nbsp; &nbsp; @media only screen and (orientation:landscape){&nbsp; &nbsp; &nbsp; &nbsp; #warning-message { display:none; }&nbsp; &nbsp; }</style>....<div id="wrapper">&nbsp; &nbsp; <!-- your html for your website --></div><div id="warning-message">&nbsp; &nbsp; this website is only viewable in landscape mode</div>您无法控制用户移动方向，但是至少可以向他们发送消息。本示例将在纵向模式下隐藏包装器并显示警告消息，然后在横向模式下隐藏警告消息并显示肖像。我认为这个答案没有@Golmaal更好，这只是对它的补充。如果您喜欢此答案，请确保给@Golmaal功劳。更新资料我最近与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

试试这个可能更适合您#container { display:block; }@media only screen and (orientation:portrait){&nbsp; #container {&nbsp;&nbsp;&nbsp; &nbsp; height: 100vw;&nbsp; &nbsp; -webkit-transform: rotate(90deg);&nbsp; &nbsp; -moz-transform: rotate(90deg);&nbsp; &nbsp; -o-transform: rotate(90deg);&nbsp; &nbsp; -ms-transform: rotate(90deg);&nbsp; &nbsp; transform: rotate(90deg);&nbsp; }}@media only screen and (orientation:landscape){&nbsp; #container {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;-webkit-transform: rotate(0deg);&nbsp; &nbsp; &nbsp;-moz-transform: rotate(0deg);&nbsp; &nbsp; &nbsp;-o-transform: rotate(0deg);&nbsp; &nbsp; &nbsp;-ms-transform: rotate(0deg);&nbsp; &nbsp; &nbsp;transform: rotate(0deg);&nbsp; }}<div id="container">&nbsp; &nbsp; <!-- your html for your website -->&nbsp; &nbsp; <H1>This text is always in Landscape Mode</H1></div>