85

我只想以横向模式显示我的网站，这可能吗？用户手中的设备的方向没有关系，但网站将始终处于横向模式。我已经看到iPhone应用程序可以那样工作，但是可以在网站上完成吗？

javascript html mobile-browser

— coure2011
source

3

很好的问题，但我敢打赌答案是“不可能”，尽管您可以作弊：stackoverflow.com/a/4807047/615754。

— nnnnnn 2012年

并不是的。您可以使用css转换来伪造它，但这很丑陋，而且我认为没有办法知道它是否在android上颠倒了。可以肯定的是，这里已经讨论过了。

— Dagg Nabbit 2012年

1

是否可以强制网站最小宽度为320px？因此，如果屏幕尺寸分辨率较低，则用户需要滚动查看整个网站。还是可以将240px的宽度缩放到320px的内容？

— coure2011 2012年

我不确定此链接可能对您有多大帮助，但是最新的[Jan 2020]功能建议使用W3C w3c.github.io/screen-orientation中

— Sarath Sajan

117

@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之类的东西。这真的很棒，我知道这不是纯粹的网络，而是在移动设备上的纯粹网络体验失败了。

— 杰森·塞布林（Jason Sebring）
source

让我开心！这是一个非常有用的脚本，可以在小型设备上强制使用横向模式，从而发出很好的信息。

— dhruvpatel

您虽然得到了大部分的功劳；）+ 1d是您精心描述的答案和@Golmaal ..

— Hitesh Misro

真的很有用，谢谢！值得一提的是，如果将其粘贴在单独的样式表中，这似乎不起作用。

— 毫米

您的答案比您参考的答案要好。您提供了实际的解决方案，并建议了易于实施的警告，而不是更具创造性和问题性的警告。另一个“答案”可能启发了您，但它或多或少只是在大声地想知道。提及orientation条件组属性的存在，本来会更好。

— 文斯

46

虽然我本人将在这里等待答案，但我想知道是否可以通过CSS完成：

@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}

— 高尔马尔
source

35

试试这个可能更适合您

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

展开摘要

这将自动管理均匀旋转。

— A先生
source

7

聪明，但实际上没有用。旋转页面时，大部分页面都是无法访问的，因为仅旋转内容，而不是实际的浏览器。

— Graham 2014年

2

这将破坏任何动画，并可能破坏页面的移动响应能力。

— Wissam El-Kik 2014年

2

我不得不玩我的主要容器的宽度：

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

— 海妖
source

好主意..在人像/风景之间切换时是否有任何伪影/噪声？

— hko

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

@Golmaal确实回答了这个问题，我只是有点冗长。