我只想以横向模式显示我的网站，可以吗？用户手中设备的方向无关紧要，但网站将始终处于横向模式。我见过 iPhone 应用程序是这样工作的，但是这可以在网站上完成吗？
强制网站仅以横向模式显示
IT技术
javascript
html
mobile-browser
2021-02-07 07:31:39
4个回答
@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 之类的东西。这真的很神奇，我知道它不是纯网络，但在移动设备上的纯网络体验有点失败。
虽然我自己会在这里等待答案，但我想知道是否可以通过 CSS 来完成：
@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}
@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}
试试这个它可能更适合你
#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>这将自动管理均匀轮换。
我不得不调整我的主要容器的宽度：
html {
@media only screen and (orientation: portrait) and (max-width: 555px) {
transform: rotate(90deg);
width: calc(155%);
.content {
width: calc(155%);
}
}
}