Streaming live at 10am (PST)

Webflow's viewport setting works incorrectly if the web window is not full-device-width


#1

Hey,
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."

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

and here:

"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."

http://www.quirksmode.org/mobile/metaviewport/

and here:

"[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."

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

What do you folks think about this? Can this be changed?

Thanks,
Itamar


#2

We're looking into this, but the original template was based off the HTML5 boilerplate (both http://demo.html5boilerplate.com/ and http://www.initializr.com/try have width=device-width set).

There seem to be a lot of quirks around this setting, e.g. see a previous discussion here: http://forum.webflow.com/t/tablet-horizontal-view-background-image-does-not-display-correctly/1022/17


#3

@callmevlad Got it, thanks. Since the viewport tag/setting is not yet standardized, indeed its use is not always clear... I know h5bp does it this way and many mobile-optimized sites also do, but I'm pretty sure that given the references above, and testing in the field, changing it as suggested would yield better results.

Anyway - obviously I don't expect Webflow to switch this setting at an instant as it must be rigorously tested being such a wide change. Any chance for at least allowing users to override this in some way?


#4

@itamarro, it turns out that browsers interpret the last meta tag with the same name as the active one, so you can actually override this value by adding some custom code in the section of your site.

See this thread for more details: http://forum.webflow.com/t/how-to-make-a-webflow-site-non-responsive/3615


#5

@callmevlad Got it. Thank you!


#6