We’re having an issue with Webflow pages looking wrong in a popup view we have in our (iPad) app.
Currently, Webflow seems to include this viewport statement by default, on all pages:
<meta name="viewport" content="width=device-width, initial-scale=1">
However, setting the ‘width’ explicitly means that if the page is opened in a view that does not span the entire device width - in our case, a popup with a web view - it won’t display correctly, since the web view width is not the device width.
In fact, setting the ‘width’ in the viewport tag seems counterproductive. You could suffice with this:
<meta name="viewport" content="initial-scale=1">
As explained here:
“You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation.”
“The layout viewport can be set to ideal viewport values. The width=device-width and initial-scale=1 directives do so. All scale directives are relative to the ideal viewport, and not to whatever width the layout viewport has. So maximum-scale=3 means the maximum zoom is 300% of the ideal viewport.”
“[mobile Firefox ] will expand the viewport width if necessary to fill the screen at the requested scale. This matches the behavior of Android and Mobile Safari, and is especially useful on large-screen devices like the iPad.”
What do you folks think about this? Can this be changed?