Make Webpage 100% Fit On The Screen – screenfit

Preview:

Description:

screenfit is a JavaScript library that makes your page 100% fit on the screen across all browsers and platforms.

With the screenfit library, pages (or other elements like images, maps) will full-fill the current visible area of your webpage or app even if the OS keyboard shows up or a splash screen appears on the screen.

How to use it:

1. Enable the screenfit by simply including the main JavaScript on your webpage.

<!-- CDN -->
<script defer src="https://unpkg.com/screenfit"></script>
<!-- Local -->
<script defer src="min.js"></script>

2. Load polyfills for Kindle and Internet Explorer if needed.

<script data-polyfill=kindle>
  if(!Object.bind)document.write('<script src="js/kindle.js"><\x2fscript>');
</script>
<script data-polyfill=ie11>try{
  new CustomEvent('InternetExplorer')}
  catch(_){
    document.write('<script src="js/ie.js"><\x2fscript>')
  }
</script>

3. Track screen size changes and get the current information.

addEventListener('screenfit', function (event) {
  document.body.className = 'fit';
  document.querySelector('footer').textContent = [
    'current: ' + Math.round(event.detail.height),
    'inner: ' + Math.round(innerHeight),
    'avail: ' + Math.round(screen.availHeight)
  ].join(' - ');
  console.log(Math.random());
});