@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;
}
}由Andreas Gotfredsen提供。
我刚刚尝试了一下，但没有完全成功。vw 和 vh 单位似乎仍然参考原始的纵向方向，因此使用这些单位完成的任何布局都会失效。理想情况下，我们可以在页面旋转时交换 vw 和 vh，但我找不到任何方法可以做到这一点。一种解决方法是定义 –vw 和 –vh 变量并为每个方向分别设置它们，但随后在使用它们时，我们将不得不使用笨拙的 calc()/var() 语法。
Chris，我们现在可以使用屏幕方向API，请参阅 https://w3c.github.io/screen-orientation/
screen.orientation.lock('portrait')
screen.orientation.lock('landscape')
screen.orientation.unlock()
但这不适用于所有浏览器
我在 Google Chrome 中运行时遇到以下错误。
Uncaught (in promise) DOMException: screen.orientation.lock() 在此设备上不可用。
这些
screen.orientation.lock()API 仅在移动版 Firefox 中受支持……简单的解决方法……只需添加 height: 100vw;
+1，添加了“height: 100vw;” 以上方法完美运行！
如何禁用它？我的手机是 OPPO F1 Plus，即使我打开了屏幕旋转功能，它也不会旋转了。感谢您的回复。
你做不到，你必须购买一部新手机。
一个程序员在我的网站上实现了这个功能，但我不想保留它。我该如何删除它？我应该查看哪个文件才能找到它并删除它？
它应该在项目中的某个 CSS 文件中。
我在 Safari iOS 12.2 中没有成功。
我在 Chrome 移动版中没有成功 - 最近有更改吗？
很棒！但是如果：transform: rotate(90deg) 我该怎么做？
transform: rotate(90deg);
transform-origin: right top;
width: 100vh;
height: 100vw;
overflow-x: hidden;
position: absolute;
top: 100%;
right: 0;
对于 Pixel 4a 手机，max-width 需要为 895px 或更大。
对于 Pixel 4a 手机，max-width 需要为 895px 或更大。
为什么需要 min-width？
选择 640×480 的触摸屏笔记本电脑怎么办？
是否可以在媒体查询中指定宽度 > 高度？