React Material UI响应式抽屉在移动设备上文字显示过小问题咨询

你遇到的移动端文字过小的问题，是因为public/index.html中缺少了移动端适配必需的viewport元标签。

解决方法 #

在public/index.html的<head>标签内添加如下代码即可：

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

修改完成后你的public/index.html完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />    
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

原因说明 #

viewport元标签的作用是通知浏览器按照设备的实际屏幕宽度渲染页面，避免移动端自动将页面缩放为桌面端宽度导致文字、元素过小。你之前在CodeSandbox中运行正常是因为CodeSandbox的默认模板已经自带了这个标签，本地新建的项目没有默认添加才会出现适配问题，和你复制的MUI组件代码无关。

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