Вы должны просто использовать:
<meta name="viewport" content="width=320">
Почему 320?Это связано с тем, что хотя экран iPhone 4 в портретной ориентации имеет ширину 640 пикселей, он представляет собой «сетчатый» дисплей с вдвое более высоким эффективным разрешением, чем на экранах настольных компьютеров.Следовательно, он имеет значение window.devicePixelRatio, равное 2, что означает, что его ширина устройства составляет всего 640/2 = 320 CSS px, то есть каждый CSS px занимает 2x2 квадрата пикселей физического устройства (см. эту статью о QuirksMode для более подробной информации).
Это 2-кратное масштабирование очень полезно, потому что, например, вы можете установить размер шрифта: 14 пикселей, и воспринимаемый размер этого текста будет таким же, как если бы вы просматривали текст размером 14 пикселей наiPhone 3G (поскольку он будет отображаться с использованием 28 пикселей физического устройства на iPhone 4, что компенсирует более высокое разрешение).Если вместо этого текст с размером шрифта: 14px будет отображаться с использованием только 14 пикселей физического устройства, он будет выглядеть крошечным на iPhone 4 (вдвое меньше, чем на iPhone 3G).
Теперь естьСледствие этого: ваш сайт должен быть рассчитан на ширину 320 пикселей, а не 640 пикселей.Но это уже было правдой, поскольку iOS никогда не поддерживала target-densityDpi = device-dpi, поэтому, помещая width = device-width, вы фактически все равно помещали width = 320.
Так зачем использовать width = 320 вместоширина = ширина устройства?Так как вы говорите, что ваш сайт имеет макет с фиксированной шириной, то при ширине = ширина устройства, скорее всего, он будет выглядеть плохо, если он будет отображаться на устройствах разных размеров, например, вы можете увидеть белое поле справа внизу на более широкомустройств, в то время как при ширине = 320 браузер увеличит его до ширины экрана устройства (поэтому он может выглядеть несколько увеличенным, но это, вероятно, лучше, чем с белым полем).
Однако, пожалуйста, учтите этомера ограничения пробела: было бы намного лучше сохранить width = device-width и изменить дизайн вашего сайта так, чтобы он был гибким вместо фиксированной ширины (например, установите ширину: 100% для ваших элементов div и изображений вместо ширины: 320px).Для получения дополнительной информации см. http://www.html5rocks.com/en/mobile/responsivedesign/
Наконец, вы можете оставить термин "user-scalable = no", если вы действительно не хотите, чтобы пользователь мог увеличивать и уменьшать масштаб, но для доступностипо этой причине часто лучше не указывать это, если только вы не разрабатываете что-то вроде mobile maps.google.com, где вы вручную обрабатываете жесты с масштабированием и не хотите, чтобы браузер вмешивался.