A cross platform, cross WebView, solution to fit 100% any Web page.
Include screenfit helper on top of your HTML page/application:
<script defer src="https://unpkg.com/screenfit"></script>and optionally opt-in to listen to changes:
addEventListener('screenfit', ({detail}) => {
const {width, height} = detail;
console.log(`Now @${width}x${height}`);
});It's important to include this module ASAP as src, defer, or module, as it adjusts both <html> and <body> styles once, so the sooner it runs, the better it is for your web/application.
When it comes to fullfill the current visible area of a Web page/application, nothing really works cross platform via CSS only, especially when the OS keyboard shows up.
This module goal is to fix the ability to fullfill a screen in both width and, most importantly, height, whenever the keyboard is on the screen, or not.
- hero images/pages that perfectly fit on the screen even with an active keyboard
- non necesasrily resizable fullscreen applications such as Maps and similar
- splash screens and login splash screens
- every other use case that needs 100% HTML area to work
Works/Tested on
- KaiOS
- Opera Mini
- UCE Browser / Mini
- Windows Phone
- Samsung Internet
- Android 6+ / Androind One
- Any Chrome/ium based browser
- Safari / Moble 13+
- Vivaldi
- Firefox / Nightly
- Desktop browsers, including IE11 (see gotchas)
Known Gotchas
- IE11 and Kindle experimental browser need features detection (see index.html)
- iOS 12 (iPad does not trigger any resize), possible work around for iOS < 13 but not sure how to detect the available size without the keyboard:
document.addEventListener('focus', resize, true). If you know how to get the right height with an iPad on iOS 12 with a keyboard up, please file an issue/contact me, thank you! - Some weird edge case might use non-system related overlays that can't be detected from JS or CSS ... in that case, be sure your web/application shows most relevant informations in the center of the screen or above some known threshold