Question

我有一个 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;
`;

移动设备上的 React App 根 div 宽度奇怪

0 个答案: