homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

iOS Viewport Settings

5+ Year Member

Msg#: 4444461 posted 12:52 am on Apr 24, 2012 (gmt 0)

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?



WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4444461 posted 3:30 am on Apr 24, 2012 (gmt 0)

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::


5+ Year Member

Msg#: 4444461 posted 4:43 pm on Apr 25, 2012 (gmt 0)

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.


WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4444461 posted 5:07 pm on Apr 25, 2012 (gmt 0)

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. :-)


5+ Year Member

Msg#: 4444461 posted 6:17 pm on Apr 25, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved