如何部署React Native Web应用并强制始终显示移动端视图

下面是几种直接可行的实现方式，按展示效果优先级排序：

方案1：CSS容器模拟手机视图（适合雇主展示） #

这是最直观的展示方案，既能固定移动端布局，还能模拟手机外观，突出项目的移动端属性：

1. 在Web入口HTML文件（如public/index.html）中添加全局样式：

<style>
  body {
    margin: 0;
    padding: 2rem 0;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    box-sizing: border-box;
  }
  /* 匹配React Native Web的根容器，通常是id为root的元素 */
  #root {
    width: 375px; /* 可选414px，对应iPhone SE/12或Plus系列尺寸 */
    height: 812px;
    border-radius: 40px;
    border: 12px solid #111;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    overflow: hidden;
    position: relative;
  }
  /* 可选：添加手机顶部状态栏模拟，增强真实感 */
  #root::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background-color: #111;
    border-radius: 28px 28px 0 0;
  }
</style>

2. 保持React Native代码的移动端开发逻辑即可，不需要做响应式适配，组件会自动填充这个固定容器。

方案2：强制固定视口（纯布局固定） #

如果不需要模拟手机边框，只想让所有设备强制显示移动端布局：

修改public/index.html里的viewport meta标签：

<meta name="viewport" content="width=375, initial-scale=1, maximum-scale=1, user-scalable=no">

该设置会强制浏览器将视口宽度固定为375px，同时禁止用户缩放，React Native组件会基于这个固定尺寸渲染移动端布局。

方案3：代码层面固定Dimensions #

如果需要在React Native代码中强制锁定屏幕尺寸，不受Web环境影响：

在项目入口文件（如App.js）顶部添加：

import { Dimensions } from 'react-native';

// 覆盖窗口尺寸为移动端标准值
Dimensions.set({
  window: {
    width: 375,
    height: 812,
    scale: 1,
    fontScale: 1
  },
  screen: {
    width: 375,
    height: 812,
    scale: 1,
    fontScale: 1
  }
});

此后所有依赖Dimensions或useWindowDimensions的组件，都会基于你设置的固定尺寸渲染。

注意事项 #

• 若项目中使用了响应式组件，方案1或方案2已能确保其不会随Web窗口大小调整；
• 测试时记得清除浏览器缓存，确保viewport或CSS样式生效。

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