SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    mobile question...

    I don't see a forum specif. for mobile, so asking here...

    I'm converting a conventional web page to mobile...

    it was working fine, but as soon as I added this meta tag..

    Code:
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    the content covers only half the screen in iPhone..
    (in Safari iPhone tester it looks fine...)
    you're always supposed to add this tag for mobile devices, right??

    it's looks exactly as I had wrapped everything in a div that's 50% wide and left-aligned..
    (I did all widths in percentages.. outer wrapper is 100% wide..)

    you're always supposed to add this tag for mobile devices, right??

    thank you...

  2. #2
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    This should work:
    Code:
    <meta name="viewport" content="width=device-width">
    It's maybe the XHTML closing tag: />

    And it's probable that you want to let the user be able to scale.

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh brother.. this prob is more complex than I thought..

    it turns out it's for content generated from the back-end (JSP env); I have classic file-includes situation (header & main body, etc..)

    so when I do "view src code" copy the code into a page and load it like that, as strictly html with all the markup hard-coded, it works, with both tags, the one I posted and the one you posted, but in JSP is where it gets messed-up.... man, that's just grand.... was not expecting to run into this problem with mobile... :-(

    (still don't know if prob is the file-includes or the JSP per se.... yikes....)

    in the JSP, the content inside the divs occupies the entire viewport, but the width of the wrapper divs is only half the viewport (100% width for the wrapper divs, this is correct, for mobile, right?)

    thank you...

  4. #4
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    never mind, I found prob... ;-) has to do w/some floating divs inside.... ;-) ooops... oh brother.. new to mobile...

    so: what is the diff between the two tags? the one I posted

    Code:
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    and the one you posted

    Code:
    <meta name="viewport" content="width=device-width">
    ??


    is there any good documentation/tutorials on coding for mobile you know about off-hand that out there you can point me to?

    thank you...

  5. #5
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    User scalable tells whether the User is allowed to zoom the page in and out. If you set it to no, then the User cannot zoom the page.

    A good website with more information: https://developer.mozilla.org/en-US/...wport_meta_tag
    James Web Development | New York, NY
    Design, Develop, Deliver

  6. #6
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by maya90 View Post
    so: what is the diff between the two tags? the one I posted

    Code:
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    and the one you posted

    Code:
    <meta name="viewport" content="width=device-width">
    ??
    Not much, beside the user-scalable part. It's about consistency and I suggested maybe it's about some crazy bugs.

    I suspect you're writing the webpage using the HTML syntax, like most of us are, and only a few tags in your code are affected by the XHTML syntax.


    Quote Originally Posted by maya90 View Post
    is there any good documentation/tutorials on coding for mobile you know about off-hand that out there you can point me to?
    https://github.com/h5bp/mobile-boilerplate/wiki

    Not a tutorial, per se, but you can learn a few things about mobile.

    320andup uses M5HBP and takes things a bit further: tiny screen first not mobile first. You can also learn a thing or two by browsing through its code: http://stuffandnonsense.co.uk/projects/320andup/

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,364
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by maya90 View Post
    I don't see a forum specif. for mobile, so asking here...
    There is one here. But design questions are fine in the Design forum.

  8. #8
    SitePoint Member
    Join Date
    Dec 2007
    Location
    Kitchener-Waterloo, Ontario
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I find it interesting that there is not a single comprehensive guide to mobile application and website usability. With the explosion of smartphones and tablets in recent years and the massive usability industry why is there no such resource? Is is because it's too big a topic or is it just underserved? I'm not trying to derail this conversation I'm just echoing the poster's difficulty in finding authoritative information.

  9. #9
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by stwordia View Post
    I find it interesting that there is not a single comprehensive guide to mobile application and website usability. With the explosion of smartphones and tablets in recent years and the massive usability industry why is there no such resource? Is is because it's too big a topic or is it just underserved? I'm not trying to derail this conversation I'm just echoing the poster's difficulty in finding authoritative information.
    There have been plenty of general usability studies on mobile usage, but in terms of details and specifics, a big problem is that the marketplace is so diverse and fast-moving, and audiences so varied in their capabilities, competencies and browsing habits that it is difficult to pin anything down. If you're looking at website usability on a PC, you have half a dozen browser/OS combinations that you need to test in, you can check for keyboard accessibility, variable screen sizes and so on ... and then you can concentrate on the actual usability. Parameters from the device itself don't change a lot. Whereas for mobiles there are new phones coming out all the time, and this adds a huge variation into the mix. Different phones work in different ways, different screen sizes have different needs, different people have different needs. What was crucial one year may be largely irrelevant the next.

    I'm not saying that mobile development and usability isn't worth further study it undoubtedly is, it is where the bulk of future growth lies, but it isn't a mature technology, and it's so rapidly evolving that any detailed study would be out of date before it was published.


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
  •