React项目移动端下根div#root无法占满100%宽度如何解决

• 基于npx create-react-app搭建简易React项目，全局设置初始化样式规则：

* {
  margin: 0;
  padding: 0;
  /* 注意：原代码此处属性名存在拼写错误，正确写法为box-sizing: border-box，该错误不触发本次宽度异常 */
  box-sizing: border-box;
}

• 为方便验证效果，额外设置样式：body { background-color: red; }，#root { background-color: #fff; }
• 异常表现：
  • 桌面端视口下页面显示完全正常，无布局问题
  • 移动端视口下显示错乱，#root容器宽度收缩，无法占满屏幕全宽
• 效果参考：
  • 
  • 
  • 
  • 

核心原因是HTML入口文件缺失移动端视口（viewport）元标签配置。
移动端浏览器默认会使用远大于设备实际屏幕宽度的虚拟视口（通常为980px宽度）渲染页面，再将整个页面缩放至屏幕大小，最终就会出现根容器看起来宽度收缩、两侧露出body背景色的异常表现。桌面端浏览器不存在该默认虚拟视口缩放逻辑，因此显示正常。

1. 打开项目public目录下的index.html文件，在<head>标签内部添加如下viewport配置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

配置说明：

• width=device-width：将页面渲染视口宽度设置为和设备实际屏幕宽度一致
• initial-scale=1.0：设置页面初始缩放比例为1，禁止浏览器默认缩放

2. （可选）修正全局样式中拼写错误的属性名，把box-sizzing改为box-sizing，避免后续盒模型计算出现异常。
3. 重启React开发服务，移动端访问即可看到#root正常占满屏幕全宽，布局恢复正常。

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