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

Question

我有一个 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 浏览器上以横向模式制作的此页面的屏幕截图（看起来不错）：

在纵向模式下（看起来很疯狂）：

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

Answer 1

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