强制设备方向通过 CSS/JS/HTML 横向

force device orientation to landscape via css/js/html?

本文关键字：CSS JS HTML 横向 方向      更新时间：2023-09-26

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

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

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

非常感谢

你可以使用 JavaScript。首先检查它是否受支持：

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

然后添加 eventListener 如果你想在轮换时做一些事情：

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

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

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

相关文章：