【发布时间】：2021-01-05 09:57:53
【问题描述】：
我正在使用 material-ui v4.9.13 和 react v16.13.1。
我有一些代码基本上会生成一些像这样的文本：
<Typography variant="body1">
{description}
</Typography>
在运行良好且body1样式正确应用的桌面上。
但是，虽然它在移动设备上运行的 Chrome 上 90% 的时间都可以正常工作，但有时，body1 样式的大小似乎会增加一倍。例如。
只是偶尔，这个：
任何想法发生了什么以及如何解决它？
仅供参考，这是我创建排版的方式：
let theme = createMuiTheme ({
spacing: 8,
typography: {
fontFamily: [
'Manrope',
'Roboto',
'Arial',
'sans-serif',
'-apple-system',
].join(','),
fontSize: 1,
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
h1: {
lineHeight: "2.2",
fontSize: "1.8em",
fontWeight: 700,
fontFamily: "\"Manrope\", \"Roboto\", \"Arial\", \"sans-serif\"",
color: '#001C32',
},
h2: {
lineHeight: "2",
fontSize: "1.6em",
fontWeight: 700,
fontFamily: "\"Manrope\", \"Roboto\", \"Arial\", \"sans-serif\"",
color: '#001C32'
},
h3: {
lineHeight: '1.5',
fontSize: "1.3em",
fontWeight: 700,
fontFamily: "\"Manrope\", \"Roboto\", \"Arial\", \"sans-serif\"",
color: '#001C32'
},
h4: {
lineHeight: '1.5',
fontSize: "1.3em",
fontWeight: 400,
fontFamily: "\"Manrope\", \"Roboto\", \"Arial\", \"sans-serif\"",
color: '#317aff'
},
h5: {
lineHeight: "1",
fontSize: "1.1em",
fontWeight: 700,
fontFamily: "\"Manrope\", \"Roboto\", \"Arial\", \"sans-serif\"",
color: '#001C32'
},
h6: {
lineHeight: "1",
fontSize: "1em",
fontWeight: 500,
fontFamily: "\"Manrope\", \"Roboto\", \"Arial\", \"sans-serif\"",
color: '#001C32'
},
subtitle1: {
lineHeight: "1",
fontSize: "0.9em",
fontWeight: 600,
fontFamily: "\"Manrope\", \"Roboto\", \"Arial\", \"sans-serif\"",
color: '#001C32'
},
subtitle2: {
lineHeight: "1",
fontSize: "0.9em",
fontWeight: 500,
fontFamily: "\"Manrope\", \"Roboto\", \"Arial\", \"sans-serif\"",
color: '#001C32'
},
body1: {
lineHeight: '1.5',
fontSize: "1.3em",
fontWeight: 400,
fontFamily: "\"Manrope\", \"Roboto\", \"Arial\", \"sans-serif\"",
color: '#001C32',
},
body2: {
lineHeight: '1.5',
fontSize: "1.3em",
fontWeight: 400,
fontFamily: "\"Manrope\", \"Roboto\", \"Arial\", \"sans-serif\"",
color: '#001C32',
},
caption: {
fontSize: "0.9em",
fontWeight: 700,
fontFamily: "\"Manrope\", \"Roboto\", \"Arial\", \"sans-serif\"",
},
button: {
fontSize: "1.8em",
textTransform: "uppercase",
fontWeight: 500,
fontFamily: "\"Manrope\", \"Roboto\", \"Arial\", \"sans-serif\"",
color: '#001C32'
}
},
palette: {
type: 'dark',
background: {
default: '#FFFFFF',
},
text: {
primary: "#001C32",
secondary: "#001C32"
},
primary: {
main: '#929396'
},
secondary: {
main: '#ff671e'
},
error: red,
warning: orange,
info: yellow,
success: green,
}
})
theme = responsiveFontSizes(theme)
【问题讨论】：
-
Body1 是排版的默认变体，您不必定义它。但是，也许 chrome 识别它处于移动状态时存在问题？您是否尝试过在打开开发者工具并启用移动代理时引用该网站？
-
刷新修复它并正确显示。但是，该问题会在点击几下后再次出现...
-
我以 Body1 为例，但 h3、h2 等也是如此。
-
@MindaugasNakrosis - 我如何“启用移动代理”？
-
当您在开发者控制台中单击“切换设备工具栏”并选择“Galaxy S5”用户代理更改时，它会告诉您的网站应该应用哪个 css（移动设备或桌面设备，material-ui 使用 body1 变体处理此问题）。但是，您需要在选择代理后刷新页面，以便网站加载时知道它已经处于“移动模式”。但是，如果刷新后问题仍然存在，我不确定这是问题所在。
标签： reactjs material-ui