The page comes up zoomed in when viewed in Chrome on iPhone 11, Android (recent) and an embedded browser in a mobile app (Pinner). Thus much of the text cannot be seen. When I pinch zoom the page out, it looks great.
The problem appears to be the viewport directive. Currently this is
<meta name="viewport" content="width=640">
But by default mobile browsers do zoom webpages. And further viewport entries in _includes/head_custom.html are removed by the parser.
A suggested solution is to change the viewport directive to something like:
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=5.0, minimum-scale=0.5">
There is a workaround here:
https://stackoverflow.com/questions/70639586/automatically-zoom-out-when-displaying-page-in-mobile-browser/
The page comes up zoomed in when viewed in Chrome on iPhone 11, Android (recent) and an embedded browser in a mobile app (Pinner). Thus much of the text cannot be seen. When I pinch zoom the page out, it looks great.
The problem appears to be the viewport directive. Currently this is
<meta name="viewport" content="width=640">But by default mobile browsers do zoom webpages. And further viewport entries in _includes/head_custom.html are removed by the parser.
A suggested solution is to change the viewport directive to something like:
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=5.0, minimum-scale=0.5">There is a workaround here:
https://stackoverflow.com/questions/70639586/automatically-zoom-out-when-displaying-page-in-mobile-browser/