React 响应式 UI 不会在移动设备上以微小的文本呈现
Posted
技术标签:
【中文标题】React 响应式 UI 不会在移动设备上以微小的文本呈现【英文标题】：React responsive UI is not rendered with tiny text on mobile devices 【发布时间】：2021-08-24 17:14:31 【问题描述】：我正在试用 React Material UI 的 responsive drawer。可以在文档中给出的Code Sandbox link 上在线试用。
我将代码复制粘贴到 Visual Studio Code 中并启动了服务器。
它在浏览器的桌面模式下渲染得很好：
但是，当我在开发工具中打开模拟模式时，抽屉和应用栏文本看起来很小。
对于响应式：
对于 Moto G4：
是不是因为 Moto G4 和我的笔记本电脑屏幕 (1920x1080) 分辨率不匹配？还是我错过了什么？
有人可以确认您在本地计算机上运行时是否得到相同的行为？还是我复制粘贴错了？我已经尝试将 Visual Studio Cod 中的代码复制粘贴回代码沙箱，它在 mobile responsive 视图的代码沙箱中运行得很好。我无法在 Moto G4 的代码沙箱中对其进行测试。
PS：我是前端开发的新手。
更新
我的项目结构如下：
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/components/DrawerNav.js
import React from "react";
import clsx from "clsx";
import makeStyles, useTheme from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import CssBaseline from "@material-ui/core/CssBaseline";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import List from "@material-ui/core/List";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";
const drawerWidth = 240;
const useStyles = makeStyles((theme) => (
root:
display: "flex"
,
appBar:
transition: theme.transitions.create(["margin", "width"],
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
)
,
appBarShift:
width: `calc(100% - $drawerWidthpx)`,
marginLeft: drawerWidth,
transition: theme.transitions.create(["margin", "width"],
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen
)
,
menuButton:
marginRight: theme.spacing(2)
,
hide:
display: "none"
,
drawer:
width: drawerWidth,
flexShrink: 0
,
drawerPaper:
width: drawerWidth
,
drawerHeader:
display: "flex",
alignItems: "center",
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
justifyContent: "flex-end"
,
content:
flexGrow: 1,
padding: theme.spacing(3),
transition: theme.transitions.create("margin",
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
),
marginLeft: -drawerWidth
,
contentShift:
transition: theme.transitions.create("margin",
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen
),
marginLeft: 0
));
export default function PersistentDrawerLeft()
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const handleDrawerOpen = () =>
setOpen(true);
;
const handleDrawerClose = () =>
setOpen(false);
;
return (
<div className=classes.root>
<CssBaseline />
<AppBar
position="fixed"
className=clsx(classes.appBar,
[classes.appBarShift]: open
)
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick=handleDrawerOpen
edge="start"
className=clsx(classes.menuButton, open && classes.hide)
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
Persistent drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer
className=classes.drawer
variant="persistent"
anchor="left"
open=open
classes=
paper: classes.drawerPaper
>
<div className=classes.drawerHeader>
<IconButton onClick=handleDrawerClose>
theme.direction === "ltr" ? (
<ChevronLeftIcon />
) : (
<ChevronRightIcon />
)
</IconButton>
</div>
<Divider />
<List>
["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
<ListItem button key=text>
<ListItemIcon>
index % 2 === 0 ? <InboxIcon /> : <MailIcon />
</ListItemIcon>
<ListItemText primary=text />
</ListItem>
))
</List>
<Divider />
<List>
["All mail", "Trash", "Spam"].map((text, index) => (
<ListItem button key=text>
<ListItemIcon>
index % 2 === 0 ? <InboxIcon /> : <MailIcon />
</ListItemIcon>
<ListItemText primary=text />
</ListItem>
))
</List>
</Drawer>
<main
className=clsx(classes.content,
[classes.contentShift]: open
)
>
<div className=classes.drawerHeader />
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus
dolor purus non enim praesent elementum facilisis leo vel. Risus at
ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum
quisque non tellus. Convallis convallis tellus id interdum velit
laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed
adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies
integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate
eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo
quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat
vivamus at augue. At augue eget arcu dictum varius duis at consectetur
lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien
faucibus et molestie ac.
</Typography>
<Typography paragraph>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est
ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar
elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse
sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat
mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis
risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas
purus viverra accumsan in. In hendrerit gravida rutrum quisque non
tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant
morbi tristique senectus et. Adipiscing elit duis tristique
sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
posuere sollicitudin aliquam ultrices sagittis orci a.
</Typography>
</main>
</div>
);
src/app.js
// import "./App.css";
import DrawerNav from "./components/DrawerNav";
function App()
return <DrawerNav />;
export default App;
src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
【问题讨论】：
请提供一些代码或示例，以便我们分析和调试。 @Alan 我刚刚在文档问题的开头添加了link。 酷！我看到你解决了！ @Alan 我通过添加<meta name="viewport" ...> 解决了这个问题。但是 react doc 上的示例没有此标记，并且仍然正确呈现。所以我觉得我仍然缺少一些东西。在仔细检查了 react 的代码框和我的之后，我意识到问题在于文件夹层次结构的差异。将 index.html 移动到与 js 文件相同的文件夹也修复了没有 <meta> 标记的渲染。但现在，我猜为什么会这样？我问了detailed new question。请看看您是否知道为什么会这样。
【参考方案1】：
问题是我不知道我应该添加：
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
到我的 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- <meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> -->
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
添加它可以正常工作。
您可以在Code Sandbox 上看到这一点。尝试删除<meta> 标签。还可以通过转到this 链接在新的 Google Chrome 选项卡中打开输出来检查效果，然后在 Google Chrome 开发工具中更改仿真。
更多关于这个标签here。
【讨论】：
以上是关于React 响应式 UI 不会在移动设备上以微小的文本呈现的主要内容，如果未能解决你的问题，请参考以下文章