SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    viewport device width

    Does <meta name="viewport" content="width=device-width> have any influence on the display of fluid and/or elastic pages?

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/...wport_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.

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by benbob View Post
    Does <meta name="viewport" content="width=device-width> have any influence on the display of fluid and/or elastic pages?
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •