强制网站只能以横向模式显示 [英] forcing web-site to show in landscape mode only

问题描述

我只想在横向模式下显示我的网站，它可能吗？用户手中的设备的方向是什么并不重要，但网站将始终处于横向模式。我已经看到iPhone应用程序可以这样工作，但是这可以通过网站完成吗？

我只是更冗长。

 < style type =text / css> 
＃warning-message {display：none; } 
 @media只有屏幕和（orientation：portrait）{
 #wrapper {display：none; } 
＃warning-message {display：block; } 
} 
 @media仅屏幕和（orientation：横向）{
＃warning-message {display：none; } 
} 
< / style> 
 
 .... 
 
< div id =wrapper> 
<！ - 您网站的html  - > 
< / div> 
< div id =warning-message> 
此网站只能在横向模式下查看
< / div> 
  

您无法控制移动方向的用户，但您至少可以向他们发送消息。此示例将在纵向模式下隐藏包装并显示警告消息，然后以横向模式隐藏警告消息并显示纵向。

我不认为这答案比@Golmaal更好，只是对它的赞扬而已。如果你喜欢这个答案，一定要给@Golmaal一分钱。

更新

我最近一直在与Cordova合作，当你有权访问原生功能时，你可以控制它。

另一个更新

所以在发布Cordova之后，它最终真的很糟糕。如果你想要JavaScript，最好使用React Native之类的东西。这真是太神奇了，我知道它不是纯粹的网页，但移动网站上纯粹的网页体验失败了。

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?

解决方案

@Golmaal really answered this, I'm just being a bit more verbose.

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

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.

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.

这篇关于强制网站只能以横向模式显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！