Оптимизация сайта для планшетов и телефонов - в 2 строчки
New! Адаптация сайтов для планшетов и телефонов.
Для тянущегося дизайна поэкспериментировал и использую такое:
<meta name=viewport content="width=device-width, height=device-height, initial-scale=1">
В стилях CSS вот такое:
@media screen and (max-width: 650px) {
img {max-width: 96% !important;}
iframe, table, span, div, textarea, input, button, submit {max-width: 100% !important;}
#vk_comments {max-width: 96% !important;}
#fb-comments {max-width: 96% !important;}
#comments {max-width: 96% !important;}
}
+
Неплохо отображаются картинки;
В телефоне сайт выглядит намного крупнее;
Текст читать удобно (можно еще настроить отдельно шрифт);
Влазят даже большие блоки Адсенс за счет уменьшнния iframe.
-
Картинки немного корежит по высоте. Понятия не имею как исправить;
Бывает, картинку в таблице сжимает до 0. Применять бы стили только к большим изображениям (больше 360px);
Сделать бы перенос (на новую строку) ячеек из больших таблиц. Из-за этого колонки очень уж узкие.
Покопался еще немного с кодом. Думаю использовать еще псевдоклассы сss :after, :before. Может помочь с переносом в таблицах. А вот прокрутку в блоках точно делать не буду. 
