SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help on Coding CSS for mobile

    I've a page, which I'd set the body, html to width 310px.

    I tried to view using iphone, its appearing at the top left of the screen and zoomed out.

    I'm trying to achieve a full page display like A List Apart and The Onion

    Those pages are fixed and can't zoom in or out.

    How do I achieve that?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You probably need this meta tag in the head:

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    I use it in this demo which will fit an iphone.


    Or the one used in the examples you linked to is this one.

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

  3. #3
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You probably need this meta tag in the head:

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    I use it in this demo which will fit an iphone.


    Or the one used in the examples you linked to is this one.

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    Hi Paul,
    That works great. Finally I can move on.

    Now, 2 things I need to clarify, base href doesn't work on mobiles? As least not from what I see. The links are broken on my site.

    Another, despite setting border=0 in table tag, borders are still coming out. And there are unsightly breaks in the table structure. vertical-align doesn't seem to work too. Does mobiles have problem displaying tables compared to a full browser??

    Is there an app thats like firebug or web developer in FF to troubleshoot on mobiles?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by resting View Post
    Hi Paul,


    Another, despite setting border=0 in table tag, borders are still coming out. And there are unsightly breaks in the table structure. vertical-align doesn't seem to work too. Does mobiles have problem displaying tables compared to a full browser??

    Is there an app thats like firebug or web developer in FF to troubleshoot on mobiles?
    To remove the border use css eg. table,td {border:none}. I don't know how all mobiles handle it but it seems to work on the iphone. Usually though you would avoid using tables on mobile devices unless they are very small with only a couple of columns.

    For testing n the iphone go to the apple site and download the developer sdk package (mac only) and one of the components is an iphone emulator although I don't know of any actual debugging tools.

    Mobile testing is a bit like "try it and see" as there are so many differences.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    See the mobile section and resources for more information.

  6. #6
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by resting View Post

    Now, 2 things I need to clarify, base href doesn't work on mobiles? As least not from what I see. The links are broken on my site.
    It does work on mobiles.

  7. #7
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you prefer not to download anything, here is a nice webapp that lets you test your mobile design in your browser, simulating the behavior of different types of devices: ProtoFluid. Rapid Prototyping of Adaptive CSS and Responsive Design.


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
  •