javascript - 通过 css/js/html 强制设备方向为横向？

Question

可能重复：
移动网站 - 仅强制横向/无自动旋转

我看过一些关于此的帖子，但并没有真正找到明确的答案，而是一些建议的解决方法。

是否可以通过网页强制设备方向？即：我可以将我的网站“堵塞”为景观吗？

非常感谢

Answer 1

您可以使用 JavaScript。首先检查是否支持：

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

然后添加 eventListener 如果你想在轮换上做点什么：

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

我想你应该在它转向时触发你的一面做出反应。您无法触发方向，因为设备会这样做。因此，当您的网站以横向模式加载时，您应该检测它并以横向模式呈现网站（加载自定义 css？），然后当访问者转动手机或平板电脑时，听众可以使用新的 CSS 重新渲染您的网站通过 JavaScript 文件（在这些情况下建议使用 jQuery）。

您还可以做什么，该网站没有太多动态，您可以使用 GET 方法调用重新加载页面以更改方向，但当然这可能是一个较慢的选择。经常在移动设备上使用 JavaScript 重新渲染整个网站，甚至可以让手机升温，因为我之前在 iPhone 上测试过。JavaScript 引擎速度快，需要大量 CPU 才能流畅地渲染所有内容，但也会在短时间内消耗大量资源，这使得移动设备很难持续保持渲染。最好的例子是使用 JavaScript 调用制作 HTML5 游戏。iPhone 最终会像在实际应用中玩游戏一样升温：P。