large-small-dynamic-viewport-units-polyfill
Version:
Polyfill for svh, dvh and lvh CSS viewport units
1 lines • 1.22 kB
JavaScript
var setVh=function(){var svh=document.documentElement.clientHeight*.01;document.documentElement.style.setProperty("--1svh",svh+"px");var dvh=window.innerHeight*.01;document.documentElement.style.setProperty("--1dvh",dvh+"px");if(document.body){var fixed=document.createElement("div");fixed.style.width="1px";fixed.style.height="100vh";fixed.style.position="fixed";fixed.style.left="0";fixed.style.top="0";fixed.style.bottom="0";fixed.style.visibility="hidden";document.body.appendChild(fixed);var fixedHeight=fixed.clientHeight;fixed.remove();var lvh=fixedHeight*.01;document.documentElement.style.setProperty("--1lvh",lvh+"px")}};var isMobile=function(){if(/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)||navigator.userAgent.match(/Mac/)&&navigator.maxTouchPoints&&navigator.maxTouchPoints>2){return true}return false};var initialize=function(){if(typeof window==="undefined"){return}if("CSS"in window&&"supports"in window.CSS&&window.CSS.supports("height: 100svh")&&window.CSS.supports("height: 100dvh")&&window.CSS.supports("height: 100lvh")){return}if(!isMobile){return}setVh();document.addEventListener("DOMContentLoaded",function(){setVh()});window.addEventListener("resize",function(){setVh()})};initialize();