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

我有一个使用material ui的nextjs应用程序（），没有任何主题，有一个页面：

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>
    </>
  );
}

从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/core/List”导入列表；
导出默认函数List2Page（）{
返回(
段落文本

Lorem ipsum dolor sit amet，献祭精英
不，不，不，不，不，不
前庭设施权杖，自由权杖
);
}

以下是在android Chrome浏览器上以横向模式制作的该页面的屏幕截图（外观正常）：

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

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

解决方案是向任何父元素添加“最大高度：999999 px”，如下所述：