Viewport META
Goals
Fix inconsistencies in certain newer mobile devices where the webpage is rendered as too narrow or is clipped on the right side. Seen most recently in Chrome on iPhone 14 Pro and iPhone X.
The Problem
Webflow generates the following viewport META, which cannot be configured.
<meta content="width=device-width, initial-scale=1" name="viewport" />
Some modern devices don't handle it well and you end up with an oddly scaled view;
Solutions
In initial testing this revised viewport META seems to work with modern iPhones ( early 2024 ).
However there are many other options you can use as well for your specific use case-
Options-
Duplicate the Tag
Duplicate the tag and hope browsers choose ours. This is done by simply pasting our revised META into the site-wide page HEAD code area. This seems to be working in most cases in my tests.
Use Javascript
Use Javascript to modify Webflowβs, which might or might not get picked up as a change by mobile browsers, and applied.
Untested.
Something like...
Reverse-Proxy
Reverse proxy the site, and fix Webflowβs tag to what we want before the browser receives it.
Sygnal's Hyperflow framework provides this capability.
Last updated