From 353ba433f05fda51b38269d5bb8bf05bfa1ddb6f Mon Sep 17 00:00:00 2001 From: Daniel Henning <2714266+puresick@users.noreply.github.com> Date: Thu, 18 May 2023 09:24:55 +0200 Subject: [PATCH] Prevent zoom-in after focusing an input on small viewports on iOS devices (#440) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * base.scss: Prevent zoom-in on focusing inputs on small viewports Adding a media query which sets the font-size for `.form-input` inputs to 1rem. This aims to prevent the zoom-in on small viewports on iOS devics which automatically zoom-in a website if the font-size in a focused input is smaller than 16px. * Update bookmarks/styles/base.scss --------- Co-authored-by: Sascha Ißbrücker --- bookmarks/styles/base.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/bookmarks/styles/base.scss b/bookmarks/styles/base.scss index 5086c50..9ab98b8 100644 --- a/bookmarks/styles/base.scss +++ b/bookmarks/styles/base.scss @@ -102,3 +102,12 @@ a:visited:hover { font-weight: bold; } } + +// Increase input font size on small viewports to prevent zooming on focus the input +// on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max +// viewport size +@media screen and (max-width: 430px) { + .form-input { + font-size: 16px; + } +}