diff --git a/client/components/head/index.jsx b/client/components/head/index.jsx index 72ae8ebefa4c..d4f1f876146f 100644 --- a/client/components/head/index.jsx +++ b/client/components/head/index.jsx @@ -8,6 +8,7 @@ const Head = ( { branchName, faviconUrl, shouldPrefetchRestProxy = true, + allowZoom = false, } ) => { return ( @@ -15,7 +16,14 @@ const Head = ( { - + @@ -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 index b24303585e94..5b41b6925083 100644 --- 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( ); + 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( ); + 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 index d90d028cb3fc..8b986c84d795 100644 --- 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 } >