From 3a3e8c0e10064bba3f62c07d9b9e95f681c27aeb Mon Sep 17 00:00:00 2001 From: MartinBraquet Date: Sun, 2 Nov 2025 20:26:29 +0100 Subject: [PATCH] Add get pixel height --- web/lib/util/css.ts | 17 +++++++++++++++++ web/pages/_app.tsx | 4 ++++ 2 files changed, 21 insertions(+) create mode 100644 web/lib/util/css.ts diff --git a/web/lib/util/css.ts b/web/lib/util/css.ts new file mode 100644 index 00000000..a1312df7 --- /dev/null +++ b/web/lib/util/css.ts @@ -0,0 +1,17 @@ +export const getPixelHeight = (varname: string) => { + // Create a temporary element + const el = document.createElement('div'); + el.style.cssText = ` + position: absolute; + bottom: 0; + height: env(${varname}); + visibility: hidden; + `; + document.body.appendChild(el); + + // Measure the computed pixel value + const value = parseFloat(getComputedStyle(el).height); + el.remove(); + + return value; +}; \ No newline at end of file diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx index 0979f65b..21e75313 100644 --- a/web/pages/_app.tsx +++ b/web/pages/_app.tsx @@ -15,6 +15,7 @@ import AndroidPush from "web/lib/service/android-push"; import {isAndroidWebView} from "web/lib/util/webview"; import {Capacitor} from '@capacitor/core'; import {StatusBar} from '@capacitor/status-bar'; +import {getPixelHeight} from "web/lib/util/css"; if (Capacitor.isNativePlatform()) { // Only runs on iOS/Android native @@ -83,6 +84,9 @@ function MyApp({Component, pageProps}: AppProps) { const title = 'Compass' const description = 'The platform for intentional connections' + console.log('safe-area-inset-bottom:', getPixelHeight('safe-area-inset-bottom')) + console.log('safe-area-inset-top:', getPixelHeight('safe-area-inset-top')) + return ( <>