Dashboard: allow pinch-to-zoom by dropping maximum-scale on dashboard sections

p-jackson · p-jackson · commit 9cb287919957 · 2026-08-06T20:27:16.000+12:00
Scope maximum-scale removal to dashboard sections via a new Head allowZoom prop; other surfaces keep maximum-scale=1.
diff --git a/client/components/head/index.jsx b/client/components/head/index.jsx
@@ -8,14 +8,22 @@ const Head = ( {
 	branchName,
 	faviconUrl,
 	shouldPrefetchRestProxy = true,
+	allowZoom = false,
 } ) => {
 	return (
 		<head>
 			<title>{ title }</title>
 
 			<meta charSet="utf-8" />
 			<meta httpEquiv="X-UA-Compatible" content="IE=Edge" />
-			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+			<meta
+				name="viewport"
+				content={
+					allowZoom
+						? 'width=device-width, initial-scale=1'
+						: 'width=device-width, initial-scale=1, maximum-scale=1'
+				}
+			/>
 			<meta name="format-detection" content="telephone=no" />
 			<meta name="mobile-web-app-capable" content="yes" />
 			<meta name="apple-mobile-web-app-capable" content="yes" />
@@ -53,6 +61,7 @@ Head.propTypes = {
 	branchName: PropTypes.string,
 	faviconUrl: PropTypes.string,
 	shouldPrefetchRestProxy: PropTypes.bool,
+	allowZoom: PropTypes.bool,
 };
 
 export default Head;
diff --git a/client/components/head/test/index.jsx b/client/components/head/test/index.jsx
@@ -35,4 +35,18 @@ describe( 'Head', () => {
 			document.querySelector( `link[rel="prefetch"][href="${ restProxyHref }"]` )
 		).toBeNull();
 	} );
+
+	test( 'should block zoom via maximum-scale by default', () => {
+		render( <Head /> );
+		expect( document.querySelector( 'meta[name="viewport"]' )?.getAttribute( 'content' ) ).toBe(
+			'width=device-width, initial-scale=1, maximum-scale=1'
+		);
+	} );
+
+	test( 'should allow zoom by dropping maximum-scale when allowZoom is set', () => {
+		render( <Head allowZoom /> );
+		expect( document.querySelector( 'meta[name="viewport"]' )?.getAttribute( 'content' ) ).toBe(
+			'width=device-width, initial-scale=1'
+		);
+	} );
 } );
diff --git a/client/document/index.jsx b/client/document/index.jsx
@@ -24,6 +24,7 @@ import WooCommerceLogo from 'calypso/components/woocommerce-logo';
 import { InterimOmnibar } from 'calypso/dashboard/app/interim-omnibar/interim-omnibar';
 import { InitialOmnibar } from 'calypso/dashboard/app/omnibar/omnibar';
 import { getDashboardStepperLogo } from 'calypso/dashboard/app/stepper-logo';
+import { A4A_DASHBOARD_SECTION_DEFINITION } from 'calypso/dashboard/app-a4a/section';
 import { CIAB_DASHBOARD_SECTION_DEFINITION } from 'calypso/dashboard/app-ciab/section';
 import { DOTCOM_DASHBOARD_SECTION_DEFINITION } from 'calypso/dashboard/app-dotcom/section';
 import isDashboardEnv from 'calypso/dashboard/utils/is-dashboard-env';
@@ -113,6 +114,11 @@ class Document extends Component {
 				? `var localeFromRoute = ${ jsonStringifyForHtml( params.lang ?? '' ) };\n`
 				: '' );
 
+		const isDashboardSection =
+			sectionName === DOTCOM_DASHBOARD_SECTION_DEFINITION.name ||
+			sectionName === CIAB_DASHBOARD_SECTION_DEFINITION.name ||
+			sectionName === A4A_DASHBOARD_SECTION_DEFINITION.name;
+
 		const isDashboardOmnibarPage =
 			( isDashboardEnv() || env === 'development' ) &&
 			( sectionName === DOTCOM_DASHBOARD_SECTION_DEFINITION.name ||
@@ -153,6 +159,7 @@ class Document extends Component {
 					branchName={ branchName }
 					inlineScriptNonce={ inlineScriptNonce }
 					faviconUrl={ headFaviconUrl }
+					allowZoom={ isDashboardSection }
 					// Firefox can reuse the anonymous REST proxy prefetch after login; see https://github.com/Automattic/wp-calypso/pull/111842.
 					shouldPrefetchRestProxy={ ! app?.isFirefox }
 				>
