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

forcing web-site to show in landscape mode only

本文关键字：横向 模式 显示 网站      更新时间：2023-09-26

我想在景观模式下显示我的网站，这是可能的吗?无论设备在用户手中的方向是什么，网站都将始终处于横向模式。我见过类似的iPhone应用程序，但这能在网站上实现吗?

@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%);
    }
  }
}

这是为我工作!

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>
相关文章：