通过css/js/html强制设备横屏方向？

Question

我看过一些关于此问题的帖子，但没有找到明确的答案，只有一些建议性的解决方法。

是否可以通过网页来强制设备方向？也就是说，我能否将我的网站“卡住”为横屏模式？

非常感谢。

- Alex

---

目前还没有允许这个的东西，但是已经有提议了。请参见屏幕方向API。 - sachleen

Answer 1

你可以使用JavaScript实现。首先检查是否被支持：

if (window.DeviceOrientationEvent) {
    console.log("DeviceOrientation is supported");
}

如果您想在旋转时执行某些操作，请添加eventListener：

window.addEventListener('deviceorientation', function(eventData) {});

我猜您应该在设备旋转时触发您的网站响应，因为您无法触发设备的方向。所以当您的网站处于横屏模式时，您应该检测并以横屏模式呈现网站（加载自定义CSS？），然后，当访问者旋转他的手机或平板电脑时，侦听器可以通过JavaScript（建议使用jQuery）重新呈现您的网站，并使用新的CSS文件。

如果网站没有太多动态效果，您还可以使用GET方法调用重新加载页面以更改方向，但这可能是较慢的选项。在移动设备上使用JavaScript重新渲染整个网站往往会使手机发热, 我之前在iPhone上测试过。虽然JavaScript引擎快速且能够平稳地渲染所有内容，但也会在短时间内消耗大量资源，使得移动设备难以不断保持渲染。最好的例子是使用JavaScript调用制作HTML5游戏。iPhone最终可能会像在实际应用程序中玩游戏一样发热 :P.

- user1467267