测试页面在桌面版和 iPhone 上的 Chrome 中运行良好...
但是在安卓手机上测试时： 页面从低处加载，然后仅在您点击屏幕或开始滚动时“跳到适当位置”。
我已经尝试过：
如果没有内容的“跳转”，我无法在 Android 上正确加载页面
页面顶部就像登陆页面，占据100svh，内容应居中。
有什么想法吗？
（我在下面创建了一个简化的测试页面，删除了很多内容并将css合并到同一页面中以帮助调查）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Meta tags -->
<title>TEST PAGE NEW YORK</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
/* Headers elements */
.header-block {
height: 100svh; /* Fills the entire viewport height */
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.selected-work {
margin: 0px;
}
/* Lower container */
.lower-container {
align-items: center;
margin-bottom: 0px;
background-color: pink;
}
</style>
</head>
<body>
<!-- Header Block starts-->
<div class="header-block">
Image and headline should be centered, not jump up into place on android.
</div>
<!-- Header Block ends-->
<!-- Setting Selected work bg colour-->
<div class="selected-work" style="background-color:whitesmoke;">
<!-- Setting Selected work bg colour-->
this is where the content would go.
<br><br>
lorem ipsum
this is where the content would go.
<br><br>
lorem ipsum
this is where the content would go.
<br><br>
lorem ipsum
this is where the content would go.
<br><br>
lorem ipsum
</div>
<!-- lower container -->
<div class="lower-container" style=" width: 100%; ">
<!-- lower container -->
<div class="basura-footer">All contents © XXX Test co</div>
<!-- lower container -->
</div>
<!-- lower container -->
</body>
</html>这是一个测试答案。谢谢！