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

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进行了很多合作，事实证明您可以在访问本机功能时对其进行控制。

另一个更新

因此，释放科尔多瓦后，这真的很可怕。如果需要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){

  #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>