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

Question

我用这种方式：

myname

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

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转换来旋转网页的内容，以便模拟方向锁定。

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

screen.orientation.lock('landscape');

见：

• https://w3c.github.io/screen-orientation/
• https://caniuse.com/screen-orientation

Answer 2

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

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