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
What’s the question?
Isn’t it scaling? How is the site laid out right now? Fixed widths as 320px?
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.
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.
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!