Created
January 6, 2022 18:01
-
-
Save shuding/5cc2f70e2f70727bcca6391c7b406eb4 to your computer and use it in GitHub Desktop.
Modern iOS 100vh Polyfill
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if (typeof window !== 'undefined') { | |
let onResize | |
if (window.visualViewport) { | |
onResize = () => { | |
const vh = window.visualViewport.height | |
document.documentElement.style.setProperty('--vh', `${vh}px`) | |
} | |
window.visualViewport.addEventListener('resize', onResize) | |
onResize() | |
} else { | |
onResize = () => { | |
const vh = window.innerHeight | |
document.documentElement.style.setProperty('--vh', `${vh}px`) | |
} | |
window.addEventListener('resize', onResize) | |
onResize() | |
} | |
} | |
// 100vh -> var(--vh) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment