Отзывчивая верстка

Это объединение резиновой и адаптивной вёрстки. В реализации самая сложная. Но результат получается наиболее приемлемый. Можно с уверенностью сказать, что сайт приспособится к любому устройству.

Автор подхода - Ethan Marcotte.

#first, #second { width: 50%; }

@media (max-width: 1000px) {

#first, #second { width: 100%; }

}

Примеры

http://www.fivesimplesteps.com/ - отзывчивый

http://trentwalton.com/ - резиновый

http://modernizr.com/ - адаптивный

http://www.bostonglobe.com/ - отзывчивый

http://www.neovada.com/ - адаптивный

Viewport

Обычно мета тег viewport используется для установки ширины и начального масштаба для окна просмотра на мобильных устройствах.

Вот пример.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

По умолчанию ширина окна просмотра на iPhone устанавливается равной 980px. Но ваш дизайн может плохо соответствовать данному диапазону. Значение может быть для шаблона слишком большим или маленьким.

<meta name="viewport" content="width=1024">

Если ваш дизайн слишком узкий, то он тоже будет выглядеть коряво. Допустим, ширина контейнера 700px и он не адаптируется. В таком случае внешний вид будет как ниже приведенном слева снимке экрана - широкая белая полоса слева.

Проблему легко устранить установив ширину окна просмотра 720px. Ширина дизайна не изменяется, но мобильное устройство будет масштабировать его до 720px.

Возможные параметры для мета-тега viewport