移动预装载机未居中

Question

我面临着理解移动预加载器如何工作的问题。所以我有一个预加载器，它在桌面屏幕上垂直和水平方向完美居中。我可以打开开发工具并在所有布局上看到相同的内容，它完全居中且响应灵敏。

现在问题发生在我自己的手机上。如果我点击 URL（我的 IP + 端口），页面将加载，并且预加载器/文本不会垂直居中，而是稍微位于底部。如果我触摸屏幕并与之交互，它就会突然进入中心。如果我刷新页面，那么在第一次加载时它会居中。仅当我第一次点击 URL 时才会出现此问题，即使是简单的文本也不会居中，无论我应用什么样式。

这让我相信我缺乏有关移动浏览器布局如何工作的信息，并且需要一些帮助来理解它。

我认为这可能是我的项目的问题，但我创建了一个新的 Next.js 项目。

这是我的根page.js：

从

./components/Loading

导入加载；

export default function Home() {
  return (
    <Loading />
  );
}

这是我的加载组件：

import styles from "./Loading.module.css";

const Loading = () => {
  return (
    <div className={styles.landingLoadingDiv}>
      <p className={styles.loadingText}>NextJS</p>
    </div>
  );
};

export default Loading;

正在加载.module.css：

.landingLoadingDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
  }
  
  .loadingText {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
  }

我知道样式不是问题，但我不明白移动渲染是如何工作的。

这是它的视觉效果：

Answer 1

您需要了解，在移动设备上，我们有动态视口大小。尝试上下滚动，当移动浏览器的控件开始隐藏/显示时，您会看到网页视图扩大或收缩。

您可以阅读更多关于

dvh

这里。