📱 Collection of Enhancements for Mobile Web
Enhancements for mobile web
Viewport Fit and Safe Area Inset Variables
To tell the browser to use the whole available space on the screen, and so enabling us to use the env() variables, we need to add a new viewport meta value:
<meta name="viewport" content="viewport-fit=cover" />You can then use env() in your CSS:
body {
padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
}viewport-fit
is an experimental technology.
enterkeyhint and inputmode
The inputmode provides a hint about the type of data that might be entered by the user while editing the element or its contents. This allows the browser to display an appropriate virtual keyboard.
The enterkeyhint is an enumerated attribute defining what action label (or icon) to present for the enter key on virtual keyboards.
Note: If you define them both at the same time it may not work, so use type="xx" for input together with enterkeyhint.