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

Блоггер / Блог 2014 год

RSS лента новостей, Подписка по Email

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

         
         
Главная, 1, 2,
( 73 )