强制网站只能以横向模式显示

我只想以横向模式显示我的网站，是否可能？ 用户手中的设备的方向是什么并不重要，但网站将始终处于横向模式。 我已经看到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> 

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

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

更新

最近我一直在使用Cordova，事实certificate你可以在访问本地特性的时候控制它。

另一个更新

所以在释放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> 

Answer 4

我必须玩我的主要容器的宽度：

 html { @media only screen and (orientation: portrait) and (max-width: 555px) { transform: rotate(90deg); width: calc(155%); .content { width: calc(155%); } } }