Javascript 强制网站仅以横向模式显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8738072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
forcing web-site to show in landscape mode only
提问by coure2011
I want to show my web-site in landscape mode only, is it possibile? It does not matter what the orientation is of device in user's hand but the web site will always be in landscape mode. I have seen iPhone application working like that but can this be done for a web-site?
我只想以横向模式显示我的网站，可以吗？用户手中设备的方向无关紧要，但网站将始终处于横向模式。我见过 iPhone 应用程序是这样工作的，但是这可以为网站完成吗？
回答by Jason Sebring
@Golmaal really answered this, I'm just being a bit more verbose.
@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>
You have no control over the user moving the orientation however you can at least message them. This example will hide the wrapper if in portrait mode and show the warning message and then hide the warning message in landscape mode and show the portrait.
您无法控制用户移动方向，但您至少可以向他们发送消息。此示例将在纵向模式下隐藏包装器并显示警告消息，然后在横向模式下隐藏警告消息并显示纵向。
I don't think this answer is any better than @Golmaal , only a compliment to it. If you like this answer, make sure to give @Golmaal the credit.
我不认为这个答案比 @Golmaal 更好，只是对它的赞美。如果您喜欢这个答案，请务必给@Golmaal 点赞。
Update
更新
I've been working with Cordova a lot recently and it turns out you CAN control it when you have access to the native features.
我最近一直在与 Cordova 合作，结果证明当您可以访问本机功能时，您可以控制它。
Another Update
另一个更新
So after releasing Cordova it is really terrible in the end. It is better to use something like React Native if you want JavaScript. It is really amazing and I know it isn't pure web but the pure web experience on mobile kind of failed.
所以在发布 Cordova 之后，它最终真的很糟糕。如果你想要 JavaScript，最好使用 React Native 之类的东西。这真的很神奇，我知道它不是纯网络，但在移动设备上的纯网络体验有点失败。
回答by Golmaal
While I myself would be waiting here for an answer, I wonder if it can be done via CSS:
虽然我自己会在这里等待答案，但我想知道是否可以通过 CSS 来完成：
@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}
@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}
回答by Mr. A
Try this It may be more appropriate for you
试试这个它可能更适合你
#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>This will automatically manage even rotation.
这将自动管理均匀轮换。
回答by Kraken
I had to play with the widths of my main containers:
我不得不调整主容器的宽度：
html {
@media only screen and (orientation: portrait) and (max-width: 555px) {
transform: rotate(90deg);
width: calc(155%);
.content {
width: calc(155%);
}
}
}
