I know there are multiple questions related to this, but none of them seem to be valid anymore since the browser team has made changes since these questions were asked. I'm trying to find the latest solution to this problem.
My wish is to have the fixed header remain stationary on top when using a mobile web browser, especially when the user has focus on an input field and the virtual keyboard is shown, for an app-like experience.
Recently, the Chrome mobile team changed how mobile web layout and visual viewports are resized to be consistent with Chrome on iOS and mobile Safari on iOS.
This GIF from David Fedor's article very succinctly shows the current state of most (but not all) mobile browsers, which is when the on-screen keyboard (OSK, aka virtual keyboard) the visual viewport "moves up" Displayed when a field has focus.
The biggest problem I'm facing is that I can't get the title element to stay on top visually when the OSK is displayed. This is a big deal when your top app bar has a main action in the form of "Save". It clutters the user experience and causes customers to leave frustrated, so it's not a small thing in my opinion.
I've tried the VisualViewport API recommended by the Chrome team, referencing env(keyboard-inset-height) but that doesn't seem to work, which makes me think I'm doing something weird with the layout Things like ENV not being set correctly.
Nothing too crazy, use CSS Grid to control the layout.
HTML
<html>
<body>
<div id="container">
<header id="header">header</header>
<main id="main">
main
<input type="text" />
</main>
<footer id="footer">footer</footer>
</div>
</body>
</html>
CSS Style
body {
margin: 0;
}
#container {
height: 100dvh;
display: grid;
grid-template:
"header" 50px
"main" 1fr
"footer" 50px
"keyboard" env(keyboard-inset-height, 0px); // does not seem to work?
}
#header {
grid-area: header;
}
#main {
grid-area: main;
overflow-y: scroll;
}
#footer {
grid-area: footer;
}
What I get is the following two screenshots, one is the layout I want, the second is when you focus the cursor on the input near the bottom it "pushes" the entire visual viewport up, Make the title off-screen.
| full screen | Input-centered |
|---|---|
Is there currently any way to ensure that the title always remains on top of the visual viewport? After the recent Chrome update, I can't currently find a working solution.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
For Google Chrome 108 or later, set
<meta name="viewport" content="width=device-width, initial-scale=1.0, Interactive-widget=resizes-content">.Note the interactive-widget
attribute in theviewportmeta tag.I found the solutionhere.
Checked the latest version of Chrome for Android.
body { margin: 0; } #container { height: 100dvh; display: grid; grid-template: "header" 50px "main" 1fr "footer" 50px ; } #header { grid-area: header; } #main { grid-area: main; overflow-y: scroll; } #footer { grid-area: footer; }