SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Iphone and Ipad

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    London
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Iphone and Ipad

    Hi

    I have built a site optimised for iphone viewport 320px x 480px and works fine, I now need it to scale to automatically fit the Ipad viewport when the page loads.

    My meta viewport is below.

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

    Thx in advance

  2. #2
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    What's the question?

    Isn't it scaling? How is the site laid out right now? Fixed widths as 320px?

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    London
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, the site doesn't scale on the Ipad and yep the site is laid out with a 320px width.

    And the question is how do I scale the Iphone layout to work on a Ipad.

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Don't set a 320px width.

    Write your page fluid in the first place. With your meta tag, an iPhone should "know" how wide it is and use that width as your page's width... an iPad should know its width(s) and do the same... but it can only do this if you don't explicitly say "320px" on stuff.

    Here's a really simple example of someone making a "mobile" stylesheet:
    iPad CSS

    You can see the pre elements were not considered... they do not break the text inside (which is the point of them) and so do not fit on smaller screens. Here the author is using two media queries to target iPad orientations. However with a fluid layout in the first place you really don't need to even be that complicated.

    The only place I set pixels when building for mobile are
    -small things that hold images and need set px widths/heights (these are never layout boxes)
    -the media queries themselves, inside <link> tags

    Everything else I'll leave off mentioning any widths on layout boxes. Just let them fill the available space and see if you want to center stuff inside or what.

    When visiting UAs indicate they understand media queries AND are wider than my media queries settings, I'll set widths on things in em's or %, and add in floats and whatnot. I would avoid floats and major positioning on the mobile version.

  5. #5
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using meta viewport width to scale your website

    I realize this thread is a bit old, but perhaps someone else will stumble upon it looking for the answer like I was (which I've subsequently figured out).

    Viewport width *does not* indicate the number of pixels to which you want your site scaled (as I originally assumed). Width indicates how many of your site's pixels will be displayed in the device's viewing area.

    So f you want to "scale up" a 320px design to fill the iPad:

    <meta name="viewport" content="width=320px; user-scalable=0;" />

    With this setting, 320px of your site will scale to fill the viewing area on the iPad. The drawback to this is that because the site is scaled it may look blurry (images at least...text should be fine). One way around this is to use higher res images than you need for the iPhone with their size controlled by CSS. For instance, instead of using a 40x40 logo, make it 80x80, but define height:40px/width:40px in your CSS). When your site is scaled from 320 to 1024 (or 768) the image should scale more gracefully. But there's a balance to strike between scaling down an image for iPhone and scaling it up for iPad. It can look bad in either direction so you may need to tinker to find the optimal size.

    Best of luck!


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
  •