有没有办法在移动设备上强制水平/横向布局？答案

【问题标题】：Is there a way to force horizontal / landscape layout on mobile devices?有没有办法在移动设备上强制水平/横向布局？
【发布时间】：2011-06-15 23:16:32
【问题描述】：

我正在构建网站的移动版本，在这种特定情况下，它在水平布局中看起来很完美。无论用户设置如何，有没有办法强制这种布局？

感谢您以通用方式回答，但如果您知道如何在任何特定平台（iPhone、android..）上实现此目的，那么也许我们可以收集一套适合大多数移动用户的规则。

【问题讨论】：

【解决方案1】：

尝试将此 Meta 添加到您的

<meta name="viewport" content="width=480">

垂直模式下水平滚动条的存在会提示用户他/她需要旋转到横向。我看不到很多用例 - 但我已经在一些游戏和地图应用程序中看到了这一点，所以它并不完全是邪恶的。

【讨论】：

【解决方案2】：

有一个 hack 可以做到这一点，但我强烈建议不要使用它 - 你的设计应该适应某人是处于纵向还是横向模式。

第 1 步：查询 window.orientation 属性以查看您是处于横向还是纵向模式

第 2 步：如果您处于纵向模式，请在包裹整个页面的 div 上使用 -webkit-transform rotate (-90) 以强制其进入横向布局。

这将无法正常工作 - 浏览器 UI 仍将处于纵向模式，但可能用户会发现他们应该将手机旋转回横向模式才能查看内容。这对用户来说非常烦人 - 他们尝试以纵向模式阅读您的网站可能是有充分理由的。

【讨论】：

谢谢，我完全同意你的看法，这是要避免的，我手头只有一个例外，可以确认规则。
在我正在做的一个项目中实现了这一点，结果并不好。如果可以，请远离这个。这显示了糟糕的 UI/UX，我认为它更适合显示带有媒体查询的某种消息，而不是尝试旋转整个 HTMLelement。
另外，最好的解决方案是对纵向和横向视图都有一个答案，而不是依赖黑客。