Comments on: Choosing a viewport for iPad sites

By: pkwooster

pkwooster — Fri, 27 Jan 2012 16:30:37 +0000

Hi,

I’ve noticed some strange behaviour on the iPad and iPhone for short pages that use the meta viewport tag. The width is set much too large in portrait mode. Long pages appear to work properly, I’ve put together a simple test for this at http://test.devondev.com.

I don’t want to prevent the user from zooming in, so I’m not setting the maximum-scale value.

I’m using iOS 4.3.5 on the iPhone and iOS 5.0.1 on the iPad.

Thanks/peter

By: Dillon

Dillon — Sun, 22 Jan 2012 00:03:01 +0000

Thank you!!! Fixed the alignment issues I was having. You’re a lifesaver!

By: Joey

Joey — Tue, 10 Jan 2012 04:36:48 +0000

Thank you so much! This is exactly what I needed to learn tonight. Cheers.

By: destryalhmns

destryalhmns — Fri, 09 Dec 2011 15:45:57 +0000

I can’t get to work at all. I have copied the format directly from apple, android, and webkit documentation as well as following all of the examples that can be found by google.

I have no idea why it does not work. You can change any attribute to anything and it does nothing. For me, this is true in Safari(user agent=ipad), on an actual iPad, and on a droid tablet.

I would really like to get the viewport working because I believe doing so will fix an android cropping issue and an iPad jqm page transition issue. Basically not being able to use the viewport is making the site look bad.

Does anyone have any idea what the problem could be? Here is basic sample code in which the viewport tag is not working for me: http://stackoverflow.com/questions/8347314/android-3-1-browser-does-not-respect-viewport-at-all

By: Stephan

Stephan — Fri, 09 Dec 2011 08:03:49 +0000

Great article. After reading this very book I was redirected here through a few links. I recommend this read for everyone that wants to forever avoid any problems with websites scaling on any device! This book is the holy grail for webdesigners and developers; enjoy.

http://www.abookapart.com/products/responsive-web-design

By: alex

alex — Wed, 23 Nov 2011 14:24:40 +0000

Good article!thanks!

One thing i’m not sure: if the html content size is explicitly assigned in the html text and it ‘s larger then the size in the meta item, the meta content does not work for me!!

Any suggestion?
Thanks in advance.

By: Abs

Abs — Fri, 14 Oct 2011 22:50:43 +0000

Hi Allen,

My site, http://www.fistinthesky.com, just won’t configure properly after following your steps. My current width is set to 100.8em.

Do you have any ideas on to make it view properly on the iPhone and iPad?

Thanks

Abs

By: Stephen

Stephen — Sun, 02 Oct 2011 11:11:26 +0000

My problem with the iPad (and my iPhone 4 does the exact same thing so I’m guessing its actually a mobile Safari thing) is simply lack of consistancy with what it does…
Some websites over 980 wide will scale down to fit and others don’t..

e.g. the image across the top of http://www.puttilingerie.com is 1120 pixels wide but scales down to fit perfectly automatically in landscape mode

http://www.clubofaces.co.uk/ipad however has an image of exactly the same width but doesn’t (and cannot be) scaled down to fit

By: Lisa

Lisa — Thu, 29 Sep 2011 17:27:06 +0000

Thanks Allen, The IPad im using is iOS4.. Actually noticed the same issues when i visited daringfireball.com on this ipad. I did however looked into it a little more and I added this below – and it seemed to fixed the problem – this is forcing it to fill the screen and im still able to zoom in.

using minimum-scale=1.0

Thanks again Allen

By: Allen

Allen — Thu, 29 Sep 2011 17:12:44 +0000

Hi Lisa: I don’t see the behaviour you describe on my iPad – maybe it’s different on iOS 5?