SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    the secret to viewport?

    I am attempting to allow my website at least slightly better mobile accessibility by using metatag viewport in order for the whole page to show up instead of the top right corner. I also want to allow the user functionality to enlarge at will.

    I'm using this: <meta name="viewport" content="width=device-width; initial-scale=1.0">

    but it isn't working (at least on iPhone safari, which is the only device I have to test on).

    Is there more to this than just the viewport meta?

    code is currently on this page:

    http://www.refrakted.net

    thanks

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi refrakted and welcome to SitePoint

    What you're using is correct.
    I think the problem is with your container which has a fixed width: 800px;
    Change it to 100%.

    If you want everything to work on smart phones, you'll need to apply flexible layouts, or at least override your fixed desktop widths using the below.

    I personally load a separate style sheet once the device width is detected (the below will cover iphone portrait and landscape):
    Code HTML4Strict:
    <link rel="stylesheet" media="screen and (min-width : 320px) and (max-width: 480px)" href="css/smartphone.css">

    Hope this helps,
    Barry
    The more you learn.... the more you learn there is more to learn.

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Barry. I had read on some tutorials " every website should be optimized to accommodate smaller screen size, even if it’s a fixed width design." It's just that no one has mentioned the normal viewport meta tag ONLY works with flex widths. Until I get to a point where I can convert all my containers to % widths, I can at least achieve my goals on a fixed width design by using a fixed width in my viewport tag:
    <meta name="viewport" content="width=800">

    Source: http://www.bigbossmas.com/web-develo...obile-devices/

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by refrakted View Post
    Until I get to a point where I can convert all my containers to % widths, I can at least achieve my goals on a fixed width design by using a fixed width in my viewport tag:
    <meta name="viewport" content="width=800">
    Wow, I wasn't aware of that trick. I did look at your post earlier but was sure of the best solution. Thanks for posting your findings and the link.

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I found this page regarding the viewport tag informative:

    http://blog.javierusobiaga.com/stop-...m_medium=email
    Steve Husting

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can use media queries in css and make a responsive layout too


Tags for this Thread

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
  •