Ссылки Поиск Написать В избранное NO

Оптимизация сайта для планшетов и телефонов - в 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. Может помочь с переносом в таблицах. А вот прокрутку в блоках точно делать не буду.