Add get pixel height

This commit is contained in:
MartinBraquet
2025-11-02 20:26:29 +01:00
parent f010bf7eed
commit 3a3e8c0e10
2 changed files with 21 additions and 0 deletions

17
web/lib/util/css.ts Normal file
View File

@@ -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;
};

View File

@@ -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<PageProps>) {
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 (
<>
<Head>