如何在手机网站上锁定自动旋转？答案

【问题标题】：How can I lock auto rotate on the website for the mobile phone?如何在手机网站上锁定自动旋转？
【发布时间】：2018-04-05 11:58:42
【问题描述】：

我是这样用的：

   @media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { 
    html{
        -webkit-transform: rotate(-90deg);
           -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
             -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
        -webkit-transform-origin: left top;
           -moz-transform-origin: left top;
            -ms-transform-origin: left top;
             -o-transform-origin: left top;
                transform-origin: left top;
        position: absolute;
        top: 100%;
            left: 0
    }

但是当我旋转手机时，我看到了白色显示。

【问题讨论】：

标签： javascript html css frontend screen-rotation

【解决方案1】：

您可以为此使用带有方向的媒体查询：

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) { html { transform: rotate(-90deg); transform-origin: left top; width: 100vh; overflow-x: hidden; position: absolute; top: 100%; left: 0; } }

这里的技巧是检测更改的方向并使用 CSS 转换来旋转网页的内容以模拟方向锁定。

如果您对使用 Javascript 来完成此任务的想法感到满意，那么您可以试试这个：

screen.orientation.lock('landscape');

见：

【讨论】：

谢谢，但它不起作用。当我旋转我的设备时，我也看到了白色显示。
你有什么想法吗？
@ЮрийБуцан 这可能与您网页的 CSS 有关。您可以尝试查找根本原因，也可以尝试我在编辑中建议的js方法。

【解决方案2】：

你可以试试这个https://w3c.github.io/screen-orientation/ 并使用：

screen.orientation.lock('portrait')
screen.orientation.lock('landscape')
screen.orientation.unlock()

【讨论】：