rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: add fallback for viewport height on mobile (#1766)

Browse Source
This commit is contained in:
Aman Harwara
2022-10-07 15:41:45 +05:30
committed by GitHub
parent 8de6023848
commit 1e3acd50e9
3 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/web/src/javascripts/App.tsx
View File

@@ -41,16 +41,17 @@ const getKey = () => {
return keyCount++
}
const setViewportHeight = () => {
export const setViewportHeightWithFallback = () => {
const currentValue = parseInt(document.documentElement.style.getPropertyValue('--viewport-height'))
const newValue = visualViewport && visualViewport.height > 0 ? visualViewport.height : window.innerHeight
const supportsSVHUnit = CSS.supports('height', '1svh')
if (currentValue && !newValue) {
return
}
if (!currentValue && !newValue) {
document.documentElement.style.setProperty('--viewport-height', '100vh')
document.documentElement.style.setProperty('--viewport-height', supportsSVHUnit ? '100svh' : '100vh')
return
}
@@ -79,9 +80,9 @@ const startApplication: StartApplication = async function startApplication(
const onDestroy = () => {
if (device.environment === Environment.Desktop) {
window.removeEventListener('resize', setViewportHeight)
window.removeEventListener('resize', setViewportHeightWithFallback)
}
window.removeEventListener('orientationchange', setViewportHeight)
window.removeEventListener('orientationchange', setViewportHeightWithFallback)
const rootElement = document.getElementById(ElementIds.RootId) as HTMLElement
root.unmount()
rootElement.remove()
@@ -96,10 +97,10 @@ const startApplication: StartApplication = async function startApplication(
disableIosTextFieldZoom()
setViewportHeight()
window.addEventListener('orientationchange', setViewportHeight)
setViewportHeightWithFallback()
window.addEventListener('orientationchange', setViewportHeightWithFallback)
if (device.environment === Environment.Desktop) {
window.addEventListener('resize', setViewportHeight)
window.addEventListener('resize', setViewportHeightWithFallback)
}
setDefaultMonospaceFont(device.platform)