Allow page zooming/scaling

[lex111]

We need to allow page content scaling/zooming, since it is essential to users with low vision, for example.

[github-actions]

Size Changes

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	91.21 KB (🟡 +44 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Hundred Eighty-five Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/	203.67 KB (🟡 +533 B)	294.88 KB
/404	202.78 KB (🟡 +543 B)	293.99 KB
/blog	37.32 KB (🟢 -601 B)	128.54 KB
/blog/2013/06/02/jsfiddle-integration	213.8 KB (🟢 -44 B)	305.01 KB
/blog/2013/06/05/why-react	215.53 KB (🟢 -45 B)	306.74 KB
/blog/2013/06/12/community-roundup	215.23 KB (🟢 -45 B)	306.44 KB
/blog/2013/06/19/community-roundup-2	215.9 KB (🟢 -45 B)	307.11 KB
/blog/2013/06/21/react-v0-3-3	213.95 KB (🟢 -44 B)	305.16 KB
/blog/2013/06/27/community-roundup-3	216.26 KB (🟢 -47 B)	307.48 KB
/blog/2013/07/02/react-v0-4-autobind-by-default	214.57 KB (🟢 -42 B)	305.78 KB
/blog/2013/07/03/community-roundup-4	215.63 KB (🟢 -45 B)	306.85 KB
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values	214.43 KB (🟢 -46 B)	305.65 KB
/blog/2013/07/17/react-v0-4-0	215.14 KB (🟢 -45 B)	306.36 KB
/blog/2013/07/23/community-roundup-5	216.03 KB (🟢 -43 B)	307.24 KB
/blog/2013/07/26/react-v0-4-1	213.91 KB (🟢 -44 B)	305.13 KB
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails	214.51 KB (🟢 -44 B)	305.73 KB
/blog/2013/08/05/community-roundup-6	215.32 KB (🟢 -44 B)	306.54 KB
/blog/2013/08/19/use-react-and-jsx-in-python-applications	214.52 KB (🟢 -44 B)	305.74 KB
/blog/2013/08/26/community-roundup-7	215.49 KB (🟢 -45 B)	306.7 KB
/blog/2013/09/24/community-roundup-8	216.92 KB (🟢 -45 B)	308.14 KB
/blog/2013/10/03/community-roundup-9	215.86 KB (🟢 -45 B)	307.08 KB
/blog/2013/10/16/react-v0.5.0	215.54 KB (🟢 -44 B)	306.76 KB
/blog/2013/10/29/react-v0-5-1	213.9 KB (🟢 -46 B)	305.11 KB
/blog/2013/11/06/community-roundup-10	217.52 KB (🟢 -44 B)	308.74 KB
/blog/2013/11/18/community-roundup-11	216.6 KB (🟢 -45 B)	307.81 KB
/blog/2013/12/18/react-v0.5.2-v0.4.2	214.37 KB (🟢 -46 B)	305.58 KB
/blog/2013/12/19/react-v0.8.0	214.79 KB (🟢 -45 B)	306.01 KB
/blog/2013/12/23/community-roundup-12	216.25 KB (🟢 -45 B)	307.47 KB
/blog/2013/12/30/community-roundup-13	216.04 KB (🟢 -42 B)	307.25 KB
/blog/2014/01/02/react-chrome-developer-tools	214.29 KB (🟢 -45 B)	305.5 KB
/blog/2014/01/06/community-roundup-14	215.63 KB (🟢 -45 B)	306.84 KB
/blog/2014/02/05/community-roundup-15	216.84 KB (🟢 -44 B)	308.06 KB
/blog/2014/02/15/community-roundup-16	216.56 KB (🟢 -44 B)	307.78 KB
/blog/2014/02/16/react-v0.9-rc1	216.96 KB (🟢 -45 B)	308.18 KB
/blog/2014/02/20/react-v0.9	217.41 KB (🟢 -47 B)	308.63 KB
/blog/2014/02/24/community-roundup-17	216.27 KB (🟢 -43 B)	307.49 KB
/blog/2014/03/14/community-roundup-18	217.24 KB (🟢 -44 B)	308.45 KB
/blog/2014/03/19/react-v0.10-rc1	215.55 KB (🟢 -45 B)	306.76 KB
/blog/2014/03/21/react-v0.10	215.57 KB (🟢 -45 B)	306.78 KB
/blog/2014/03/28/the-road-to-1.0	215.68 KB (🟢 -45 B)	306.9 KB
/blog/2014/04/04/reactnet	214.32 KB (🟢 -45 B)	305.54 KB
/blog/2014/05/06/flux	214.45 KB (🟢 -43 B)	305.66 KB
/blog/2014/05/29/one-year-of-open-source-react	214.67 KB (🟢 -44 B)	305.89 KB
/blog/2014/06/27/community-roundup-19	216.22 KB (🟢 -44 B)	307.44 KB
/blog/2014/07/13/react-v0.11-rc1	216.6 KB (🟢 -45 B)	307.82 KB
/blog/2014/07/17/react-v0.11	217.86 KB (🟢 -45 B)	309.07 KB
/blog/2014/07/25/react-v0.11.1	214.81 KB (🟢 -45 B)	306.02 KB
/blog/2014/07/28/community-roundup-20	216.36 KB (🟢 -44 B)	307.58 KB
/blog/2014/07/30/flux-actions-and-the-dispatcher	215.99 KB (🟢 -45 B)	307.21 KB
/blog/2014/08/03/community-roundup-21	216.03 KB (🟢 -46 B)	307.24 KB
/blog/2014/09/03/introducing-the-jsx-specification	214.03 KB (🟢 -44 B)	305.25 KB
/blog/2014/09/12/community-round-up-22	216.51 KB (🟢 -42 B)	307.72 KB
/blog/2014/09/16/react-v0.11.2	214.8 KB (🟢 -45 B)	306.02 KB
/blog/2014/09/24/testing-flux-applications	217.98 KB (🟢 -45 B)	309.2 KB
/blog/2014/10/14/introducing-react-elements	216.94 KB (🟢 -42 B)	308.16 KB
/blog/2014/10/16/react-v0.12-rc1	216.9 KB (🟢 -48 B)	308.12 KB
/blog/2014/10/17/community-roundup-23	217.47 KB (🟢 -46 B)	308.69 KB
/blog/2014/10/27/react-js-conf	214.08 KB (🟢 -45 B)	305.29 KB
/blog/2014/10/28/react-v0.12	216.84 KB (🟢 -45 B)	308.06 KB
/blog/2014/11/24/react-js-conf-updates	214.46 KB (🟢 -44 B)	305.68 KB
/blog/2014/11/25/community-roundup-24	217.71 KB (🟢 -45 B)	308.92 KB
/blog/2014/12/18/react-v0.12.2	214.49 KB (🟢 -45 B)	305.71 KB
/blog/2014/12/19/react-js-conf-diversity-scholarship	214.88 KB (🟢 -45 B)	306.1 KB
/blog/2015/01/27/react-v0.13.0-beta-1	215.85 KB (🟢 -47 B)	307.07 KB
/blog/2015/02/18/react-conf-roundup-2015	217.84 KB (🟢 -45 B)	309.05 KB
/blog/2015/02/20/introducing-relay-and-graphql	216.99 KB (🟢 -45 B)	308.2 KB
/blog/2015/02/24/react-v0.13-rc1	215.9 KB (🟢 -45 B)	307.11 KB
/blog/2015/02/24/streamlining-react-elements	218.45 KB (🟢 -45 B)	309.67 KB
/blog/2015/03/03/react-v0.13-rc2	215.23 KB (🟢 -46 B)	306.44 KB
/blog/2015/03/04/community-roundup-25	216.19 KB (🟢 -46 B)	307.41 KB
/blog/2015/03/10/react-v0.13	216.51 KB (🟢 -45 B)	307.72 KB
/blog/2015/03/16/react-v0.13.1	214.33 KB (🟢 -44 B)	305.54 KB
/blog/2015/03/19/building-the-facebook-news-feed-with-relay	217.08 KB (🟢 -44 B)	308.3 KB
/blog/2015/03/26/introducing-react-native	214.22 KB (🟢 -46 B)	305.44 KB
/blog/2015/03/30/community-roundup-26	216.16 KB (🟢 -44 B)	307.37 KB
/blog/2015/04/17/react-native-v0.4	215.07 KB (🟢 -44 B)	306.28 KB
/blog/2015/04/18/react-v0.13.2	214.4 KB (🟢 -45 B)	305.62 KB
/blog/2015/05/01/graphql-introduction	218.89 KB (🟢 -45 B)	310.11 KB
/blog/2015/05/08/react-v0.13.3	214.29 KB (🟢 -43 B)	305.51 KB
/blog/2015/05/22/react-native-release-process	214.44 KB (🟢 -45 B)	305.66 KB
/blog/2015/06/12/deprecating-jstransform-and-react-tools	214.9 KB (🟢 -45 B)	306.11 KB
/blog/2015/07/03/react-v0.14-beta-1	216.41 KB (🟢 -46 B)	307.62 KB
/blog/2015/08/03/new-react-devtools-beta	215.01 KB (🟢 -47 B)	306.22 KB
/blog/2015/08/11/relay-technical-preview	215.07 KB (🟢 -45 B)	306.29 KB
/blog/2015/08/13/reacteurope-roundup	216.66 KB (🟢 -45 B)	307.88 KB
/blog/2015/09/02/new-react-developer-tools	214.43 KB (🟢 -43 B)	305.64 KB
/blog/2015/09/10/react-v0.14-rc1	220.11 KB (🟢 -44 B)	311.33 KB
/blog/2015/09/14/community-roundup-27	216.59 KB (🟢 -44 B)	307.8 KB
/blog/2015/10/01/react-render-and-top-level-api	215.56 KB (🟢 -45 B)	306.77 KB
/blog/2015/10/07/react-v0.14	220.6 KB (🟢 -46 B)	311.81 KB
/blog/2015/10/19/reactiflux-is-moving-to-discord	216.3 KB (🟢 -44 B)	307.52 KB
/blog/2015/10/28/react-v0.14.1	214.32 KB (🟢 -45 B)	305.53 KB
/blog/2015/11/02/react-v0.14.2	214.35 KB (🟢 -44 B)	305.56 KB
/blog/2015/11/18/react-v0.14.3	214.47 KB (🟢 -45 B)	305.68 KB
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship	215.34 KB (🟢 -42 B)	306.56 KB
/blog/2015/12/16/ismounted-antipattern	214.94 KB (🟢 -44 B)	306.16 KB
/blog/2015/12/18/react-components-elements-and-instances	218.87 KB (🟢 -46 B)	310.08 KB
/blog/2015/12/29/react-v0.14.4	214.14 KB (🟢 -45 B)	305.35 KB
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A	215.16 KB (🟢 -46 B)	306.37 KB
/blog/2016/01/12/discontinuing-ie8-support	213.96 KB (🟢 -45 B)	305.18 KB
/blog/2016/02/19/new-versioning-scheme	215.34 KB (🟢 -45 B)	306.56 KB
/blog/2016/03/07/react-v15-rc1	218.1 KB (🟢 -45 B)	309.31 KB
/blog/2016/03/16/react-v15-rc2	214.96 KB (🟢 -44 B)	306.17 KB
/blog/2016/03/29/react-v0.14.8	214.09 KB (🟢 -46 B)	305.31 KB
/blog/2016/04/07/react-v15	222.29 KB (🟢 -47 B)	313.51 KB
/blog/2016/04/08/react-v15.0.1	214.85 KB (🟢 -44 B)	306.06 KB
/blog/2016/07/11/introducing-reacts-error-code-system	214.56 KB (🟢 -45 B)	305.78 KB
/blog/2016/07/13/mixins-considered-harmful	222.72 KB (🟢 -46 B)	313.93 KB
/blog/2016/07/22/create-apps-with-no-configuration	218.05 KB (🟢 -46 B)	309.26 KB
/blog/2016/08/05/relay-state-of-the-state	218.09 KB (🟢 -45 B)	309.3 KB
/blog/2016/09/28/our-first-50000-stars	219.53 KB (🟢 -46 B)	310.75 KB
/blog/2016/11/16/react-v15.4.0	217.49 KB (🟢 -44 B)	308.7 KB
/blog/2017/04/07/react-v15.5.0	218.05 KB (🟢 -45 B)	309.26 KB
/blog/2017/05/18/whats-new-in-create-react-app	217.46 KB (🟢 -44 B)	308.67 KB
/blog/2017/06/13/react-v15.6.0	216.07 KB (🟢 -45 B)	307.28 KB
/blog/2017/07/26/error-handling-in-react-16	216.42 KB (🟢 -44 B)	307.63 KB
/blog/2017/09/08/dom-attributes-in-react-16	216.85 KB (🟢 -44 B)	308.07 KB
/blog/2017/09/25/react-v15.6.2	215.18 KB (🟢 -44 B)	306.4 KB
/blog/2017/09/26/react-v16.0	220.31 KB (🟢 -46 B)	311.53 KB
/blog/2017/11/28/react-v16.2.0-fragment-support	218.23 KB (🟢 -44 B)	309.44 KB
/blog/2017/12/07/introducing-the-react-rfc-process	214.76 KB (🟢 -44 B)	305.98 KB
/blog/2017/12/15/improving-the-repository-infrastructure	230.56 KB (🟢 -47 B)	321.78 KB
/blog/2018/03/01/sneak-peek-beyond-react-16	214.72 KB (🟢 -45 B)	305.93 KB
/blog/2018/03/27/update-on-async-rendering	219.96 KB (🟢 -46 B)	311.18 KB
/blog/2018/03/29/react-v-16-3	216.78 KB (🟢 -42 B)	308 KB
/blog/2018/05/23/react-v-16-4	216.92 KB (🟢 -44 B)	308.14 KB
/blog/2018/06/07/you-probably-dont-need-derived-state	220.58 KB (🟢 -45 B)	311.8 KB
/blog/2018/08/01/react-v-16-4-2	215.58 KB (🟢 -45 B)	306.79 KB
/blog/2018/09/10/introducing-the-react-profiler	217.19 KB (🟢 -45 B)	308.4 KB
/blog/2018/10/01/create-react-app-v2	217.66 KB (🟢 -45 B)	308.87 KB
/blog/2018/10/23/react-v-16-6	216.86 KB (🟢 -45 B)	308.07 KB
/blog/2018/11/13/react-conf-recap	214.57 KB (🟢 -46 B)	305.79 KB
/blog/2018/11/27/react-16-roadmap	220.77 KB (🟢 -46 B)	311.98 KB
/blog/2018/12/19/react-v-16-7	215.7 KB (🟢 -43 B)	306.91 KB
/blog/2019/02/06/react-v16.8.0	217.96 KB (🟢 -45 B)	309.18 KB
/blog/2019/02/23/is-react-translated-yet	217.53 KB (🟢 -44 B)	308.75 KB
/blog/2019/08/08/react-v16.9.0	220.46 KB (🟢 -45 B)	311.68 KB
/blog/2019/08/15/new-react-devtools	215.06 KB (🟢 -46 B)	306.28 KB
/blog/2019/10/22/react-release-channels	216.88 KB (🟢 -43 B)	308.09 KB
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense	221.58 KB (🟢 -45 B)	312.79 KB
/blog/2020/02/26/react-v16.13.0	217.81 KB (🟢 -45 B)	309.02 KB
/blog/2020/08/10/react-v17-rc	224.08 KB (🟢 -46 B)	315.3 KB
/blog/all	53.44 KB (🟢 -589 B)	144.66 KB
/community	203.37 KB (🟡 +536 B)	294.58 KB
/community/acknowledgements	204.56 KB (🟡 +536 B)	295.77 KB
/community/meet-the-team	205.09 KB (🟡 +546 B)	296.31 KB
/learn	212.07 KB (🟡 +542 B)	303.29 KB
/learn/add-react-to-a-website	208.19 KB (🟡 +544 B)	299.41 KB
/learn/adding-interactivity	209.99 KB (🟡 +543 B)	301.21 KB
/learn/choosing-the-state-structure	215.74 KB (🟡 +541 B)	306.95 KB
/learn/conditional-rendering	207.97 KB (🟡 +548 B)	299.18 KB
/learn/describing-the-ui	207.17 KB (🟡 +541 B)	298.39 KB
/learn/editor-setup	204.45 KB (🟡 +541 B)	295.67 KB
/learn/escape-hatches	202.69 KB (🟡 +540 B)	293.91 KB
/learn/extracting-state-logic-into-a-reducer	213.34 KB (🟡 +547 B)	304.55 KB
/learn/importing-and-exporting-components	206.36 KB (🟡 +540 B)	297.58 KB
/learn/installation	204.01 KB (🟡 +543 B)	295.23 KB
/learn/javascript-in-jsx-with-curly-braces	206.44 KB (🟡 +544 B)	297.66 KB
/learn/keeping-components-pure	210.59 KB (🟡 +561 B)	301.81 KB
/learn/managing-state	209.29 KB (🟡 +537 B)	300.5 KB
/learn/manipulating-the-dom-with-refs	211.21 KB (🟡 +543 B)	302.42 KB
/learn/passing-data-deeply-with-context	210.72 KB (🟡 +543 B)	301.94 KB
/learn/passing-props-to-a-component	210.15 KB (🟡 +545 B)	301.36 KB
/learn/preserving-and-resetting-state	212.96 KB (🟡 +544 B)	304.17 KB
/learn/queueing-a-series-of-state-updates	207.93 KB (🟡 +538 B)	299.15 KB
/learn/react-developer-tools	203.89 KB (🟡 +541 B)	295.11 KB
/learn/reacting-to-input-with-state	212.42 KB (🟡 +554 B)	303.63 KB
/learn/referencing-values-with-refs	209.46 KB (🟡 +544 B)	300.67 KB
/learn/render-and-commit	206.43 KB (🟡 +541 B)	297.64 KB
/learn/rendering-lists	210.5 KB (🟡 +544 B)	301.71 KB
/learn/responding-to-events	209.49 KB (🟡 +541 B)	300.71 KB
/learn/scaling-up-with-reducer-and-context	207.51 KB (🟡 +543 B)	298.73 KB
/learn/sharing-state-between-components	208.22 KB (🟡 +540 B)	299.43 KB
/learn/start-a-new-react-project	204.87 KB (🟡 +545 B)	296.08 KB
/learn/state-a-components-memory	213.67 KB (🟡 +544 B)	304.88 KB
/learn/state-as-a-snapshot	207.48 KB (🟡 +543 B)	298.7 KB
/learn/thinking-in-react	209.37 KB (🟡 +539 B)	300.58 KB
/learn/updating-arrays-in-state	211.56 KB (🟡 +541 B)	302.77 KB
/learn/updating-objects-in-state	211.27 KB (🟡 +547 B)	302.49 KB
/learn/writing-markup-with-jsx	206.37 KB (🟡 +543 B)	297.58 KB
/learn/your-first-component	207.27 KB (🟡 +544 B)	298.48 KB
/reference	203.32 KB (🟡 +529 B)	294.53 KB
/reference/reactdom	203.47 KB (🟡 +535 B)	294.68 KB
/reference/render	204.81 KB (🟡 +537 B)	296.03 KB
/reference/usestate	211.29 KB (🟡 +537 B)	302.51 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

[gaearon]

Can we do this but disable the iOS built-in “zoom into the sandbox on click” behavior somehow?

[lex111]

Yes, this can be achieved, but then code in sandboxes will be increased to 16px (only in which case iOS will not scale a page), see https://stackoverflow.com/questions/11064237/prevent-iphone-from-zooming-form for more details (it's the old question, but mentioned solution still works). See also https://twitter.com/joshwcomeau/status/1379782931116351490?s=12

[gaearon]

Btw what devices does this actually disable zooming on?

[lex111]

I have tested it on an iPhone 12, but anyway it is not recommended to disable page scaling, it is bad in terms of a11y.
UPD: committed a fix for iOS, so you can see it in action on the preview site. This solution also works if we increase font size in sandboxes when only they get focus (.cm-content:focus), maybe that would be better?

[gaearon]

I have tested it on an iPhone 12, but anyway it is not recommended to disable page scaling, it is bad in terms of a11y.

I’m asking because I’m able to pinch the existing site (iPhone 11). So I want to be sure which interaction exactly we’re fixing.

[lex111]

This solution should work well on iPhone 11 too. As mentioned earlier, it's possible to increase font size only for focus state to prevent browser zooming in iOS, then font size in sandboxes will keep same as it in the current production version if you want. (Probably not many people will edit code in sandbox.)

[gaearon]

Sorry, I wasn't clear. I want to understand what exact scenario this PR is trying to fix by changing the meta tag. I know the meta tag says it's not scalable, but I'm able to zoom it on iOS just fine already. So I want to know what is the actual thing that's currently broken on the main branch.

[lex111]

The problem is that on Android devices at the moment doesn't work zooming/scaling, an that's what I want to fix in the current PR.