Remove maximum-scale=1 from viewport meta tag

The maximum-scale=1 attribute prevents low-vision users from magnifying the page in some browsers. This isn't applicable to browsers like Safari in iOS 10+, but it would still be ideal to accommodate the aforementioned users for other browsers. Also, this results in a Lighthouse score penalty for accessibility. Alternatively, we could increase maximum-scale to 5 or above if removing it results in a known UI/UX regression I haven't looked into.

Some further reading:
* https://a11yproject.com/posts/never-use-maximum-scale/
* https://web.dev/meta-viewport
* https://www.w3.org/TR/WCAG21/#resize-text
This commit is contained in:
Farrel Mahaztra 2020-07-10 17:51:52 +07:00 committed by GitHub
parent c08fe10125
commit ced6be1505
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,5 +1,5 @@
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ if .IsHome }}{{ $.Site.Params.Subtitle }}{{ else }}{{ .Summary | plainify }}{{ end }}"/> <meta name="description" content="{{ if .IsHome }}{{ $.Site.Params.Subtitle }}{{ else }}{{ .Summary | plainify }}{{ end }}"/>
<meta name="keywords" content="{{ with .Params.Keywords }}{{ delimit . ", " }}{{ else }}{{ $.Site.Params.Keywords }}{{ end }}"/> <meta name="keywords" content="{{ with .Params.Keywords }}{{ delimit . ", " }}{{ else }}{{ $.Site.Params.Keywords }}{{ end }}"/>
<meta name="robots" content="noodp"/> <meta name="robots" content="noodp"/>