移动浏览器中 Material-ui 组件的字体大小不一致

摄像头

我有一个 nextjs 应用程序(https://codesandbox.io/s/kind-ellis-bkobb?file=/pages/list2.js)使用 material-ui 没有任何主题的页面:

import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import List from "@material-ui/core/List";

export default function List2Page() {
  return (
    <>
      <p>Paragraph text</p>
      <List>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <ListItem>
          Donec pretium elit id augue vulputate dignissim non eget
        </ListItem>
        <ListItemText>
          Vestibulum scelerisque facilisis libero quis congue nulla
        </ListItemText>
        <ListItem>
          <ListItemText primary="Proin ornare sapien libero, eget commodo sem laoreet sit"></ListItemText>
        </ListItem>
      </List>
    </>
  );
}

这是在横向模式下在 android Chrome 浏览器上制作的此页面的屏幕截图(看起来不错):

横向截图

在纵向模式下(看起来很疯狂):

纵向截图

为什么纵向模式下两个元素比其他元素小很多,如何使字体大小一致?

摄像头

解决方案是将“max-height: 999999px”添加到任何父元素,如下所述:https ://stackoverflow.com/a/60044980/523972

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用媒体查询和浏览器缩放时字体大小不一致

为什么 Image 在 Material-UI Avatar 组件中没有显示在浏览器中?

Material-UI v1:如何为material-ui v1中的所有组件设置一种字体大小?

Material UI:如何在 React Material Ui Stepper 中更改标签的字体大小?

Material UI中缺少组件

如何在material-ui中自定义活动选项卡的字体大小

如何在Material ui自动完成中更改选项的字体大小?

ReactJS:如何在Material UI中更改步进标签的字体大小和marginTop?

Chrome和Firefox中的“文本区域”行和列大小不一致

行高和字体大小不一致的问题

Material UI:使侧边栏中的字体变大

React+Material UI:如何更改 Select 组件的字体大小?

React+Material UI:如何更改 Select 组件的字体大小?

如何更改 Material-UI 的 Chip 的字体大小

字体未在 Safari 或移动浏览器中呈现

在移动浏览器中滚动时调整背景大小

在Material UI中调整组件的大小而不会变形

在所有浏览器上,边框在Material-ui Chip组件内部出现正常缩放比例,但在放大或缩小时不会出现

如何减少 Material UI 和 formik 中 Material-UI<Select> 输入字段的高度和大小?

使用浏览器后退按钮关闭多个嵌套的Material UI对话框-reactjs

Jupyter Notebook输出在各个浏览器中不一致

使用drawImage()时,画布在浏览器中的像素网格不一致

Material-UI 组件仅在移动设备上溢出屏幕

我希望能够使用列表大小不一致的列表中的结果使用NULLS创建数据框

法语Google字体在使用同一浏览器的不同设备上不一致

在移动浏览器中打开时对材质ui做出反应,但无响应

Kendo PDF中的字体错误或不一致

字体:垂直指标不佳会导致浏览器之间的行高呈现不一致。解?

material-ui按钮中的字体真棒图标