如何给React站点设置移动端缩放与桌面端一致，无需响应式适配？

1. 修改viewport元标签 #

在React项目的public/index.html文件的<head>标签中，修改/新增viewport配置：

<meta name="viewport" content="width=1200, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes">

注意将配置中的1200替换为你站点桌面端的实际设计宽度，比如1920等。该配置会强制移动端浏览器将视口宽度固定为你指定的桌面端宽度，初始缩放比例和桌面端完全一致，同时允许用户手动缩放。

2. 固定页面容器宽度 #

在全局CSS中添加如下规则，避免页面内容被压缩：

body {
  min-width: 1200px; /* 和上面viewport的width值保持一致 */
  margin: 0;
  overflow-x: auto;
}
#root {
  width: 1200px; /* 同上保持一致 */
}

注意事项 #

• 删除所有已有的响应式媒体查询代码，避免样式冲突
• 若使用了带响应式适配的第三方组件库，需单独覆盖组件样式，固定为桌面端宽度
• 可根据需求调整maximum-scale的值控制用户最大可缩放倍数

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