iOS Viewport Settings - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

iOS Viewport Settings

ocon

12:52 am on Apr 24, 2012 (gmt 0)

10+ Year Member

Top Contributors Of The Month

I am having the hardest time setting up my viewport for webpages that I am trying to make very iPhone/iPad friendly. What I would like is to make the webpage have a scale of 1.0 and to prevent scaling.

I am using Apple's own viewport documentation and example: [developer.apple.com...]

<meta name = "viewport" content = "user-scalable=no, width=device-width">

I am testing it out on my iPhone. While the page looks great when loaded in portrait mode, the page "zooms in" when the phone is rotated to landscape mode. I do not want this, I want the scale to be the same regardless of orientation. If the phone is now wider I want the page to be able to use this added width and do things such as put more words per line, just like a browser would do with a fluid layout if there was more room, not make the words larger with the same layout amount of lines each paragraph.

I have played around with setting minimum and maximum scales, but with no luck.

<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Is this even possible?

lucy24

3:30 am on Apr 24, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I believe this is an absolute and inherent feature of the iOS. Er, feature, not bug ;) Before you get too mad, remember that it's the only way users can change the text size of the page. You can't just set a different monitor resolution or fiddle with the "View" menu, because there ain't none.

You'll understand when you are 20 years older ::snrk::

ocon

4:43 pm on Apr 25, 2012 (gmt 0)

10+ Year Member

Top Contributors Of The Month

Thanks lucy24 for the post. I think my problem was the fact that I was defining elements on my webpage, such as fonts, with ems instead of pixels. It stays the same now, but I'm determining the pros and cons of using pixels over ems for me.

rocknbil

5:07 pm on Apr 25, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Then hard code it to the pixel width of the orientation you want and set width to it in the meta: width=1024px" with user scalable=no. (or 768 if you want)

Bad idea IMO, but that approach should work (no guarantees. :-) ) The iPad forces us to think and design in a way that may be new to some of us, especially when most designs come from the pixel-width dependent Photoshop, in that we have to design so that the width can change and maintain integrity in the layout. For those designing since the late 90's, this is the same old concept - design so it can fit any width and still work. :-)

ocon

6:17 pm on Apr 25, 2012 (gmt 0)

10+ Year Member

Top Contributors Of The Month

Oh, sorry, I meant I got it to work when specifying the font-size in pixels instead of ems. I left my viewport as recommended. Now the font stays the same size regardless of if its an iPhone, iPad, or Desktop, regardless of its orientation.