这一招应该行得通：

@media screen and (orientation: landscape) {
      html {
        /* Rotate the content container */
        transform: rotate(-90deg);
        transform-origin: left top;
        /* Set content width to viewport height */
        width: 100vh;
        /* Set content height to viewport width */
        height: 100vw;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
      }
    }

<h1>Test</h1>

如果你只需要在移动的设备上应用这个，你可以做一些JavaScript技巧来识别设备类型，如果是移动的设备，你可以添加一个类is-mobile-device或其他东西，并在样式定义中指定html.is-mobile-device作为选择器。您可能已经使用了为不同设备类型添加类的框架，因此您可以指定这些设备类型。
请注意，这实际上不会锁定方向，只是使页面看起来像是锁定的。

根据我的经验，这是不可能做到的，因为你是从浏览器访问网站。应该具有锁定方向功能的是浏览器本身-例如Safari，Chrome。你的HTML CSS代码将无法控制它。
例如，当你正在构建一个混合移动的应用程序时，这意味着一个带有html、css和js的应用程序，然后将其转换为带有 Package 器的移动的应用程序， Package 器内部是一个web视图。然后您可以锁定屏幕方向。有一些配置需要做，稍后这些将被转换为目标C或Java。

我们可以使用CSS;这可能适用于iPhone：

@viewport {  
   orientation: portrait;  
 }

这里有一个链接，我们可以添加它基本上做同样的事情：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

这可能不适用于所有浏览器，但希望会有所帮助。它使用JavaScript来“锁定”方向&第二个方法还向屏幕添加了一个EventList来标识方向。
这就是我们锁定方向的方式：

screen.lockOrientation('portrait');

这是我们记录方向的方式：

screen.addEventListener("orientationchange", function () {
  console.log("The orientation of the screen is: " + screen.orientation);
});

如果您只需要对电话进行此更改，则可以使用如下所示的组合媒体查询。为了更准确，您可以使用（指针：粗糙）用于触摸设备

/* 
  CSS: For most of the phones 
  812px - for iphone x
*/

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

MDN @media - pointer support

可以使用PWA（渐进式Web应用程序）设置，但仅当PWA“安装”（添加到主屏幕）时。浏览器支持可能会有所不同，但在我看来是相当不错的。
当您创建Web清单时，请将"orientation" property
完整的指南，read here。

当你为不同的屏幕尺寸设置媒体查询时，只需将orientation属性设置为landscape，这样你的网页或任何你在landscape模式下编写CSS的内容都会显示出来。即：

@media screen and (orientation: landscape) {
  CSS here.
}

这是可能的Screen Orientation API，如果你是在一个有能力的设备和全屏。
在2023年10月，它支持Android nut而不是Apple。

HTML

<button id="btnNullscreen">Fullscreen</button>
<button id="btnLandscape">Landscap</button>
<button id="btnPortrait">Portrait</button>

JavaScript

btnNullscreen.onclick = () => document.body.requestFullscreen().catch((e) => alert(e));
btnLandscape.onclick = () => screen.orientation.lock('landscape').catch((e) => alert(e));
btnPortrait.onclick = () => screen.orientation.lock('portrait').catch((e) => alert(e));

• 我没有把它放在代码片段中，因为代码片段中的代码是沙箱，缺乏必要的特权 *