Resize content viewport to accommodate for keyboard

As of Chrome 108 and Firefox 133, when the virtual keyboard appears on a
mobile device, the default behavior changed from resizing both visual
and layout viewports to resizing just the visual viewport to match the
behavior of Safari iOS.

https://developer.chrome.com/blog/viewport-resize-behavior/
https://github.com/bramus/viewport-resize-behavior/blob/main/explainer.md

Supported in Chrome 108+ and Firefox 133+, but not in Safari yet:

https://chromestatus.com/feature/6145225857171456
https://bugzilla.mozilla.org/show_bug.cgi?id=1831649
https://bugs.webkit.org/show_bug.cgi?id=259770
This commit is contained in:
Umar Getagazov
2025-05-07 19:59:51 +01:00
parent 6905b9d768
commit e09541ad2f

View File

@@ -6,7 +6,7 @@
<title>gamja IRC client</title> <title>gamja IRC client</title>
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
<script type="module" src="./main.js"></script> <script type="module" src="./main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
</head> </head>
<body> <body>