如何在手机 phone 的网站上锁定自动旋转？

Question

我是这样使用的：

   @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
    }

但是当我旋转 phone 时，我看到白色显示。

Answer 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 转换来旋转网页内容以模拟 orientation-lock。

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

screen.orientation.lock('landscape');

参见：

Answer 2

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

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

如何在手机 phone 的网站上锁定自动旋转？

How can I lock auto rotate on the website for the mobile phone?

javascript

html

css

frontend

screen-rotation