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?