I’ve set a webpage to delimit the width of the running text using max-width:45em; on the body element, and this works well in desktop browsers. I can even scale images to this maximum width, or have them displayed in native width and crossing the right border a bit, which is also fine on desktop browsers.
However, upon looking at the page in iPhoneOS Safari, it seems to me that this needs some extra tricks. The maximum width is not the only thing… for the pancakes page, the desktop browser uses the first 105 characters for the 45 em of the first line, whereas Mobile Safari uses just 58 characters. In addition, it leaves a border of white space on the right that’s about a quarter of the screen width, if not more. (This is also happening when rotated.) Zooming in is possible, but not zooming out.
What extra “magic” do I need to tell mobile browsers to display the page at the body max-width?
These pages are deliberately simple: valid XHTML/1.1 with minimum CSS and no ECMAscript, stand-alone static HTML.
Try the following in the <head> of your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">