benbob — 2012-10-12T04:21:55-04:00 — #1
Does <meta name="viewport" content="width=device-width> have any influence on the display of fluid and/or elastic pages?
bchandler — 2012-10-12T04:33:24-04:00 — #2
That's a very ambiguous question. Influence in what regard?
The short answer is yes. It tells the browser how scale the website - so it does influence it (for the better).
benbob — 2012-10-12T05:04:00-04:00 — #3
Influence in the sense of drastically, or at least noticeably changing/improving the display on mobile devices.
With the kind help of various resident experts on this forum, I have designed my site in fluid style with the aim to appear easily viewable across all "current" browsers and platformsi.e. no need to do anything else than scroll up and down to view the entire content of a page.
From what I have seen on Ipads and androids, it seems to work quite well. I haven't seen all browsers on all platforms, so am wondering if there is an advantage to adding the viewport tag and equally if there is a potential disadvantage..
"Current" browser/platform to me, is anything post y2k.
bchandler — 2012-10-12T05:28:26-04:00 — #4
Without going into specifics that meta tag is the starting point that enables you to create site consistency across all devices. That being said, there are different methods and uses of that meta tag which enable you to alter the site displayed in the viewport even further.
I would definitely suggest having a read of this: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
To answer your question of whether there is an advantage or disadvantage. It was created to ensure consistency across most devices (advantage). In terms of disadvantages, well that comes down to your site and things like screen orientation bugs etc and this will require you to modify the meta tag to target certain devices. BUT those fixes will always require you to have that meta tag in place, so I would say, there are no disadvantages to that meta tag.
benbob — 2012-10-12T05:47:10-04:00 — #5
Yes, I read that bit as well as some other blogs and articles on the use of this tag. It appears to be to webdesign, what vitamin c is to health; almost impossible to have a negative effect.
I shall add it to every page on my site for the time being, and see if there are any complaints.
ralphm — 2012-10-12T08:21:41-04:00 — #6
Yes, it's really important for all mobile sites. By default, the device will set the width of any site (the "layout viewport") to around 800–1000px, meaning that a lot of it will be off screen. The meta element tells the device to match the layout viewport with the vendor-determined width of the device (in "density independent pixels"—that is, not the actual device pixels, but an arbitrary number of pixels chosen by the vendor). So even though recent iPhones are some 640px wide (in portrait mode), they are set at 320px wide in device independent pixels (dips). So the meta element will force the device to display the full page on the screen. Then it's time for media queries to kick in and make better use of the space, so that everything isn't too small. And a lot of devices recognize 320px as their dip width.