React Web应用在移动设备强制仅竖屏显示，现有meta标签失效怎么办？

你所用的<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">不属于W3C标准定义的meta标签，仅部分老旧定制浏览器曾提供过兼容支持，目前所有主流移动端浏览器（Chrome、Safari、各厂商内置浏览器）均不识别该标签，因此无法实现禁止旋转的效果。

方案1：CSS强制视觉竖屏适配（优先推荐） #

该方案无权限要求、兼容性覆盖99%以上移动端浏览器，逻辑为检测到设备横屏时，将页面根元素旋转90度，强制视觉呈现为竖屏效果，无需用户授权。
在全局CSS文件（如React项目的index.css）中添加如下代码即可：

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

方案2：JS调用屏幕方向API锁定系统方向 #

该方案可以直接锁定系统级的屏幕方向，但存在以下限制：

• 仅支持HTTPS站点（本地开发localhost不受限）
• 必须由用户主动交互（触摸、点击等）触发调用，页面初始化时直接调用会被浏览器拦截
• 部分老旧浏览器不支持该API，需搭配CSS方案做降级处理

React中实现示例如下：

import { useEffect } from 'react';

function App() {
  const lockOrientation = async () => {
    try {
      // 可选锁定方向：portrait-primary（正向竖屏）、portrait-secondary（反向竖屏）、landscape-primary等
      await screen.orientation.lock('portrait-primary');
    } catch (err) {
      // 锁定失败时自动降级使用CSS适配即可
      console.log('屏幕方向锁定失败，已降级为CSS适配', err);
    }
  };

  useEffect(() => {
    // 绑定首次触摸事件触发锁定，符合浏览器调用规则
    window.addEventListener('touchstart', lockOrientation, { once: true });
    return () => window.removeEventListener('touchstart', lockOrientation);
  }, []);

  return <div className="App">{/* 应用业务内容 */}</div>;
}

export default App;

内容的提问来源于stack exchange，提问作者MadHatter