在移动浏览器中打开时反应材料 ui 没有响应
Posted
技术标签:
【中文标题】在移动浏览器中打开时反应材料 ui 没有响应【英文标题】：react material ui not responsive when opened in mobile browser 【发布时间】：2017-07-13 22:35:24 【问题描述】：我正在尝试使用 React Material ui 库构建移动 Web 应用程序。
但材料 UI 组件似乎没有响应。它们在桌面上显示得很好，但是当我在移动浏览器上打开它时，字体非常小。
Material UI 不就是用来构建移动应用的吗？为什么它甚至没有响应？
【问题讨论】：
我猜你没有在文档的<head> 部分添加<meta name="viewport" content="width=device-width" />。
@pawel，感谢您的指出。这正是问题所在。
【参考方案1】：
您必须在该部分中添加指令。
添加到您启动应用程序的项目中：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
视口是网页的用户可见区域。它因设备而异，在手机上会比在电脑屏幕上小。
视口元素向浏览器提供有关如何控制页面尺寸和缩放的说明。
width = device-width 部分将页面的宽度设置为设备的屏幕宽度。
initial-scale = 1.0 部分设置浏览器的第一次缩放。
【讨论】：
刚刚做了我的...嗯...晚上：D【参考方案2】：材质@4 和@5
您的公用文件夹中有一个index.html 文件。
在 <head> 标记的开头添加这一行。
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
Reference
【讨论】：
【参考方案3】：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>
【讨论】：
【参考方案4】：假设您确实添加了视口，您可以按照@Lane 的建议使用断点使您的网页响应。
步骤：
声明一个变量。 如果断点被命中则返回 true，否则返回 false。
const matches = useMediaQuery('(max-width:600px)');
参考：https://mui.com/components/use-media-query/
使用sx props 使用步骤 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 >
);
【讨论】：
以上是关于在移动浏览器中打开时反应材料 ui 没有响应的主要内容，如果未能解决你的问题，请参考以下文章