https://github.com/webreflection/screenfit
A cross platform, cross WebView, solution to fit 100% any Web page.
https://github.com/webreflection/screenfit
Last synced: 11 months ago
JSON representation
A cross platform, cross WebView, solution to fit 100% any Web page.
- Host: GitHub
- URL: https://github.com/webreflection/screenfit
- Owner: WebReflection
- License: isc
- Created: 2020-11-15T16:28:03.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-28T13:06:42.000Z (over 4 years ago)
- Last Synced: 2025-02-17T12:18:05.305Z (11 months ago)
- Language: HTML
- Size: 251 KB
- Stars: 55
- Watchers: 4
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# screenfit
A cross platform, cross WebView, solution to fit 100% any Web page.
**[Live Demo](https://webreflection.github.io/screenfit/)**
## Usage
Include *screenfit* helper on top of your *HTML* page/application:
```html
```
and optionally opt-in to listen to changes:
```js
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 `` and `` styles once, so the sooner it runs, the better it is for your web/application.
## About
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.
## Use Cases
* hero images/pages that perfectly fit on the screen even with an active keyboard
* non necesasrily resizable fullscreen applications such as [Maps](https://webreflection.github.io/map/) and similar
* splash screens and login splash screens
* every other use case that needs 100% *HTML* area to work
## Compatibility
**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](./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