通过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。