Как масштабировать сайт по ширине iPhone?

Question

У меня есть веб-сайт с ликвидным макетом, который отображает (8 x 240px) столбцы на 1920x1080px. Между ними нет пробелов. Я добавил это в ГОЛОВУ:

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=yes,width=960" >
<meta name="viewport" content="width=device-width; height=device-height;">

Я пробовал разные настройки в приведенном выше коде, но независимо от того, что я делаю на iPhone 2G и 4S, он всегда отображает (4 x 240 пикселей) столбцы (разрешения 480 × 320 пикселей и 960 x 640 пикселей).

Я хочу, чтобы он отображал 3 или 2 столбца, потому что первый столбец содержит текст, и его сейчас трудно прочитать.

Я просто хочу разделить ширину на два на iPhone. Как это можно сделать?

Кроме того, мой веб-сайт отображается по-разному на iPhone (480x320px) и на рабочем столе, когда я создаю браузер 480x320px. Почему это?

Answer 1

Раньше я не использовал meta viewport, но кажется странным устанавливать его дважды, и зачем использовать точку с запятой ; в одном и запятые , в другом?

Это кажется мне более правильным, но я не проверял это;

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1,user-scalable=yes,width=960" />

Надеюсь, это поможет!

Answer 2

Лучший способ, который я нашел, это использовать jquery для переключения настроек области просмотра в зависимости от размера экрана.

if($(window).width() >= 768) {
    // Change viewport for smaller devices
    $('meta[name=viewport]').attr('content','width=959');
}