Designing a website or web app for iOS can be confusing. Case in point, I just spent an hour explaining to my designer buddy the difference between the various possible settings that could affect how he ultimately designs for the UI elements.
It is easy, for the non-accustomed, to assume that the lofty resolution that Apple touts on their device's display specs is the one to design for. If one goes to research this on Apple.com, they will see that the display is set to 1136-by-640-pixel resolution at 326 ppi. And it would be understandable for a designer to set up their PSD file with those specs in their canvas size and resolution settings.
However, it is necessary to understand how Safari works and displays HTML. To do so, we need to understand what the meta attribute for viewport does. Here are some facts and rules about viewport settings:
1. The definition of viewport is: the viewable area for page loaded.
2. By default, Safari will render a page with 980px max width for the viewport
3. If you add a viewport setting to a page to use "device-width" and an initial scale of "1.0" using the following meta tag and attributes, iOS Safari will load a page with max width 320px:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Most web apps today uses this setting as it is optimized for most mobile devices 1-2 generations behind
4. However, if you want to take advantage of the newer devices with the higher contrast ratios, you might want to bump up or double the size of the graphics you can display in the browser. To do so, you can tweak the initial scale in the viewport settings to 0.5:
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1">
To demonstrate this very confusing issue, I've set up 3 different pages that have 3 jpgs embedded with sizes 320px, 640px and 980px widths. The first uses the default device-width viewport settings. The second doesn't use any viewport settings. And The third uses device-width and initial scale of 0.5 for its viewport settings.
Try loading each page in your iOS Safari browser to see the difference!