Разное

Вот этот сайт http://www.greenpeace.org/russia/ru/campaigns/protect-the-arctic/no-government-subsidy/?utm_source=dude_030913&utm_medium=Facebook&utm_campaign=SW2 отлично воспроизводится на телефоне с андроидом, автоматически адаптируясь как под вертикальное, так и под горизонтальное расположение телефона.

А моя страница http://wowa55.pz9.ru/ либо не адптируется вообще, либо только после долгой ручной подгонки. То у нее заголовок во весь экран, а такст узким столбиком слева, то просто крупные буквы, практически не позволябщие читать текст.
К тому же, окна формы сдвинуты друг относительно друга.

В чем у меня дефект?

Дефект в том, что у вас размеры жестко заданны. У телефона же меньше экран.....
Если задавать в процентах - будет адаптироваться.
Даже если у вас

width: 980px;

заменить на

max-width: 980px;

то уже думаю будет лучше.

Спасибо, я это уже сделал и все стало нормально.

http://frontender.com.ua/mobile-web/wtf-viewport/
http://interpretor.ru/iphone_dev

Спасибо, исключительно полезные ссылки!

А как Вы относитесь к Bootstrap http://mybootstrap.ru/ ?

Кстати, непонятно, почему не практикуется определение ширины браузера по его отклику и автоматическая подстрока сайта под эту величину? Ведь все размеры можно задать в процентах к этой ширине!

Bootstrap, это инструмент собственно говоря, и насколько он хорошо приспособлен к адаптивной верстке я не знаю, я не работал с ним. Есть и другие инструменты для адаптивной верстки, у того же Adobe. Работают с облачным ресурсом (собственно у Adobe все сейчас на облаке, CS6 это был последний их коробочный продукт, больше не будет, все на облаке по подписке), и среди них есть как платные, так и бесплатные инструменты для такой верстки.
Ну а разрабатывая такой адаптивный дизайн можно предусмотреть все, в том числе смену ориентации устройства, на то он и адаптивный.
В сети есть готовые (и бесплатные) шаблоны для адаптивной верстки, можете взять такой, как пособие для разбора и изучения.