From f4144c74697f4dbd090f3217e5ca05e890521857 Mon Sep 17 00:00:00 2001 From: Jose Olarte III Date: Tue, 30 Sep 2025 21:06:13 +0800 Subject: [PATCH] feat: disable zoom and fix iOS viewport issues - Add user-scalable=no and interactive-widget=overlays-content to viewport meta tag - Implement iOS viewport height fixes to prevent keyboard-related layout shifts - Use dynamic viewport height (100dvh) for better mobile support - Add fixed positioning and overflow controls to prevent viewport changes - Enable scrolling only within #app container for better UX --- index.html | 4 ++-- src/assets/styles/tailwind.css | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d276108b..27446bdd 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + @@ -13,4 +13,4 @@
- + \ No newline at end of file diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css index f6457ff3..6f495d75 100644 --- a/src/assets/styles/tailwind.css +++ b/src/assets/styles/tailwind.css @@ -7,6 +7,24 @@ html { font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important; } + + /* Fix iOS viewport height changes when keyboard appears/disappears */ + html, body { + height: 100%; + height: 100vh; + height: 100dvh; /* Dynamic viewport height for better mobile support */ + overflow: hidden; /* Disable all scrolling on html and body */ + position: fixed; /* Force fixed positioning to prevent viewport changes */ + width: 100%; + top: 0; + left: 0; + } + + #app { + height: 100vh; + height: 100dvh; + overflow-y: auto; + } } @layer components {