Оптимизация сайта для планшетов и телефонов - в 2 строчки
Для тянущегося дизайна поэкспериментировал и использую такое:
Код HTML:
<meta name=viewport content="width=device-width, height=device-height, initial-scale=1"> PHP код:
Неплохо отображаются картинки; В телефоне сайт выглядит намного крупнее; Текст читать удобно (можно еще настроить отдельно шрифт); Влазят даже большие блоки Адсенс за счет уменьшнния iframe. --- Картинки немного корежит по высоте. Понятия не имею как исправить; Бывает, картинку в таблице сжимает до 0. Применять бы стили только к большим изображениям (больше 360px); Сделать бы перенос (на новую строку) ячеек из больших таблиц. Из-за этого колонки очень уж узкие. Очень хочется совет - как бы до ума довести. Добавлено через 23 часа 39 минут Покопался еще немного с кодом. Думаю использовать еще псевдоклассы сss :after, :before. |
Долго тупил, но с картинками справился как-то так:
Код:
@media screen and (max-width: 650px) { |
Чтоб не потерять ссылку на проверку оптимизации в Гугле: https://developers.google.com/speed/pagespeed/insights/
|
Cпасибо за идею.
|
Цитата:
|
Ура! Я получил свои 99 / 100 Удобство для пользователей
Делалось довольно просто, если интересно: 1) Табличку меню сделал align="left" ну или style="float: left;". 2) Табличку контента не трогал, добавил <center> 3) Перед футером: <br clear="all"> 4) Всякие счетчики и подписи (которые должны стоять рядом) засунул в блоки со стилями display: inline-block; width: 30%; 5) Допилил немного media: - Увеличил шрифты при уменьшении экрана (font-size: 110%;) - Интервал между строк тоже подрос (line-height: 130%;) - Появились переносы через hyphens: auto; - Меню где-то на ширине экрана 500px разворачиваю на width: 100%; - Ну а лишние блоки, виджеты и групп и небоскреб в левой колонке скрываю через display: none !important; Кажется, все. Только для ширины экрана в 350 добавляю переносы всех слов в любом месте (word-break: break-all;) и еще увеличиваю шрифт и межстрочный интервал :) Если интересно посмотреть: http://dikij.com/ Или: http://atola.name/ С хрома можно смотреть прямо так (надо только обновлять страницу на нужном размере - чтобы реклама не мешала и подстраивалась). P.S. Фаерфокс что-то тупит и не переносит таблицу на новую строку. |
|
Да меня за*кол****о, что сам с телефона тыкаю вечно не на те ссылки. Хоть дизайн и резиновый.
А раз стал копать адаптивную рекламу гугла, то и тут перепилил заодно. :) Делов-то... |
D.iK.iJ, спасибо за проделанную работу и за подробный отчет!
|
Цитата:
Цитата:
А один align="left" style="float: left;" примененный к таблице дает неплохие такие глюки. А примененные к 2 таблицам - еще более странное поведение :) |
Часовой пояс GMT +3, время: 05:23. |
Работает на vBulletin® версия 3.8.7.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot
SAPE.RU — система купли-продажи ссылок с главных и внутренних страниц сайтов.