react material ui 在移动浏览器中打开时没有响应

Question

我正在尝试使用 React material ui 库构建uild 移动网络应用程序。

但 material UI 组件似乎没有响应。它们在桌面上显示很好，但是当我在手机浏览器上打开它时，字体很小。

material UI 不是用来制作uild 移动应用程序吗？为什么它甚至没有响应？

Answer 1

您必须在节中添加指令。

添加到您启动应用程序的项目中：

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

视口是网页的用户可见区域。它因设备而异，在移动设备 phone 上会比在计算机屏幕上小。

视口元素向浏览器提供有关如何控制页面尺寸和缩放比例的说明。

width = device-width 部分将页面的宽度设置为设备的屏幕宽度。

initial-scale = 1.0 部分设置浏览器中的第一个缩放比例。

Answer 2

https://material-ui.com/customization/breakpoints/

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

像这样使用断点：

<Grid container>
  <Grid xs={12} md={6} lg={5} item>    
  </Grid>
  <Grid xs={12} md={6} lg={7} item>
  </Grid>
</Grid>

Answer 3

Material@4 和@5

您的 public 文件夹中有一个 index.html 文件。在 <head> 标签的开头添加这一行。

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

Reference

Answer 4

假设您确实添加了视口，您可以使用断点使您的网页响应。

步骤：

声明一个变量。如果遇到断点，则此 returns 为真，否则为假。
```
const matches = useMediaQuery('(max-width:600px)');
```
参考：https://mui.com/components/use-media-query/
使用 sx 属性使用步骤 1 中的变量和三元运算符设置宽度
```
<Paper sx={{ width: matches === false ? '40vw' : '80vw' }} />
```
参考：https://mui.com/system/the-sx-prop/

示例：

const Component = () => {
    const matches = useMediaQuery('(max-width:600px)');

    return (
      <Box
         sx={{
           '& .MuiTextField-root': { **width: matches === false ? '35vw' : '70vw'** },
        }}
      >
         {/* ... */}
      </Box >
    );
}

react material ui 在移动浏览器中打开时没有响应

react material ui not responsive when opened in mobile browser

reactjs

responsive

Material@4 和@5