动画HTML启动屏幕更改移动设备上的大小

Question

我制作了一个Flutter web应用程序，并使用HTML和CSS实现了启动屏幕。在桌面设备上一切都很好，然而，当我使用手机的Chrome和Brave浏览器访问网站时，启动屏幕在显示大约一秒钟后就会变大，导致这个元素比预期的要大。

HTML代码是一个简单的div元素，而CSS属性如下：

.center {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}

Answer 1

尝试将其添加到head标记中。

<meta name="viewport" content="width=device-width, initial-scale=1.0">