fix: Disable auto-zoom on iOS

When using iOS and focussing an input element the view should not be zoomed.
So if we set a maximum scale iOS will not auto-zoom but still allow users to zoom.
But we can not do this by default as this will disable user zoom on Chrome.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

core/templates/layout.base.php

@@ -12,7 +12,9 @@
 		<title>
 		<?php p($theme->getTitle()); ?>
 		</title>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0<?php if (isset($_['viewport_maximum_scale'])) {
+			p(', maximum-scale=' . $_['viewport_maximum_scale']);
+		} ?>">
 		<meta name="theme-color" content="<?php p($theme->getColorPrimary()); ?>">
 		<meta name="csp-nonce" nonce="<?php p($_['cspNonce']); /* Do not pass into "content" to prevent exfiltration */ ?>">
 		<link rel="icon" href="<?php print_unescaped(image_path('core', 'favicon.ico')); /* IE11+ supports png */ ?>">

core/templates/layout.guest.php

@@ -20,7 +20,9 @@ p($theme->getTitle());
 ?>
 		</title>
 		<meta name="csp-nonce" nonce="<?php p($_['cspNonce']); /* Do not pass into "content" to prevent exfiltration */ ?>">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0<?php if (isset($_['viewport_maximum_scale'])) {
+			p(', maximum-scale=' . $_['viewport_maximum_scale']);
+		} ?>">
 		<?php if ($theme->getiTunesAppId() !== '') { ?>
 		<meta name="apple-itunes-app" content="app-id=<?php p($theme->getiTunesAppId()); ?>">
 		<?php } ?>

core/templates/layout.public.php

@@ -15,7 +15,9 @@ p($theme->getTitle());
 ?>
 	</title>
 	<meta name="csp-nonce" nonce="<?php p($_['cspNonce']); /* Do not pass into "content" to prevent exfiltration */ ?>">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0<?php if (isset($_['viewport_maximum_scale'])) {
+		p(', maximum-scale=' . $_['viewport_maximum_scale']);
+	} ?>">
 	<?php if ($theme->getiTunesAppId() !== '') { ?>
 	<meta name="apple-itunes-app" content="app-id=<?php p($theme->getiTunesAppId()); ?>">
 	<?php } ?>

core/templates/layout.user.php

@@ -30,7 +30,9 @@ p($theme->getTitle());
 ?>
 		</title>
 		<meta name="csp-nonce" nonce="<?php p($_['cspNonce']); /* Do not pass into "content" to prevent exfiltration */ ?>">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0<?php if (isset($_['viewport_maximum_scale'])) {
+			p(', maximum-scale=' . $_['viewport_maximum_scale']);
+		} ?>">
 
 		<?php if ($theme->getiTunesAppId() !== '') { ?>
 		<meta name="apple-itunes-app" content="app-id=<?php p($theme->getiTunesAppId()); ?>">

lib/private/TemplateLayout.php

@@ -8,6 +8,7 @@
 namespace OC;
 
 use bantu\IniGetWrapper\IniGetWrapper;
+use OC\AppFramework\Http\Request;
 use OC\Authentication\Token\IProvider;
 use OC\Files\FilenameValidator;
 use OC\Search\SearchQuery;
@@ -20,6 +21,7 @@ use OCP\Defaults;
 use OCP\IConfig;
 use OCP\IInitialStateService;
 use OCP\INavigationManager;
+use OCP\IRequest;
 use OCP\IURLGenerator;
 use OCP\IUserSession;
 use OCP\L10N\IFactory;
@@ -286,6 +288,13 @@ class TemplateLayout extends \OC_Template {
 			}
 		}
 
+		$request = \OCP\Server::get(IRequest::class);
+		if ($request->isUserAgent([Request::USER_AGENT_CLIENT_IOS, Request::USER_AGENT_SAFARI])) {
+			// Prevent auto zoom with iOS but still allow user zoom
+			// On chrome (and others) this does not work (will also disable user zoom)
+			$this->assign('viewport_maximum_scale', '1.0');
+		}
+
 		$this->assign('initialStates', $this->initialState->getInitialStates());
 
 		$this->assign('id-app-content', $renderAs === TemplateResponse::RENDER_AS_USER ? '#app-content' : '#content');