大佬教程收集整理的这篇文章主要介绍了移动设备上的 React App 根 div 宽度奇怪，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个 React 应用程序（不是 React Native）。我在浏览器中对其进行了处理，使其具有响应性等。现在我想检查一下它在移动设备上的外观。
看到这个我很惊讶：
如您所见，页面标题变得更小，并且一些元素（例如用户头像）溢出了它。这特别奇怪，因为我在开发工具中选择的 div 是 root - 所有应用程序内容也都使用的 div（我已通过 create-react-app 引导项目）。所以导航栏缩小到 root div 宽度，但用户头像等元素没有 - 这很奇怪，因为这是一个网格，它们应该很快堆叠在彼此的顶部，重新组织。
现在，当我在浏览器中正常查看它时，它可以正常工作，即使我将页面缩小到 150 像素宽度 - 导航栏覆盖页面的全宽，元素也被正确组织。
我认为这可能是设备模拟器的错误，所以我检查了我的智能手机 - 不走运，与这里的情况几乎相同。所以这并不是说这个白色条纹不会出现在视口中，即使我最大限度地缩小移动 Chrome 浏览器，我也可以在手机上看到它。
是什么导致了这种事情？
P.S 同样的事情发生在 firefox 中
@编辑
index.tsx - 在这里我访问 root div
import App from "./containers/App";
ReactDOm.render(
<React.StrictMode>
<App />
</React.StrictMode>,document.getElementByID("root")
);
index.HTML
<!DOCTYPE HTML>
<HTML lang="en">
<head>
<Meta charset="utf-8" />
<link rel="icon" href="%PUBliC_URL%/favicon.ico" />
<Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1" />
<Meta name="theme-color" content="#000000" />
<Meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBliC_URL%/logo192.png" />
<link rel="manifest" href="%PUBliC_URL%/manifest.Json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div ID="root"></div>
</body>
</HTML>
App 组件 - 我在此处删除了路由以减小其大小：
const App = () => {
const [loggedIn,setLoggedIn] = useState(isAuthenticated());
const [currentUser,setCurrentUser] = useState<UserData | null>(null);
const classes = styles();
useEffect(() => {
if (!loggedIn) {
setCurrentUser(null);
return;
}
const getUser = async () => {
setCurrentUser(await getCurrentUser());
};
getUser();
},[loggedIn]);
const logIn = () => {
setLoggedIn(true);
};
const logout = () => {
setLoggedIn(false);
};
return (
<Router>
<s.PageContainer>
<PageheaderAD currentUser={CurrentUser} logout={logout} />
<s.PageContent>
<Switch>
[...]
</Switch>
</s.PageContent>
</s.PageContainer>
</Router>
);
};
应用中使用的容器：
const PageContainer = styled.div`
display: flex;
flex-direction: column;
height: 100%;
`;
const PageContent = styled.div`
flex: 1 1 auto;
`;
PageheaderAD 包含很多东西，但它被包裹在：
const Pageheader = styled.div`
BACkground: #3f51b5;
`;
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）
以上是大佬教程为你收集整理的移动设备上的 React App 根 div 宽度奇怪全部内容，希望文章能够帮你解决移动设备上的 React App 根 div 宽度奇怪所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。