Форум SAPE.RU

Форум SAPE.RU (http://forum.sape.ru/index.php)
-   Разработка и сопровождение сайтов (http://forum.sape.ru/forumdisplay.php?f=29)
-   -   Оптимизация сайта для планшетов и телефонов - в 2 строчки (http://forum.sape.ru/showthread.php?t=94083)

D.iK.iJ 02.11.2014 21:38

Оптимизация сайта для планшетов и телефонов - в 2 строчки
 
Для тянущегося дизайна поэкспериментировал и использую такое:
Код HTML:

<meta name=viewport content="width=device-width, height=device-height, initial-scale=1">
В стилях вот такое:
PHP код:

@media screen and (max-width650px) { // Если ширина экрана меньше 650
img {max-width96% !important;}
iframetablespandivtextareainputbuttonsubmit {max-width100% !important;}

//Чтобы блоки комментариев не расползались до 500px.
#vk_comments {max-width: 96% !important;}
#fb-comments {max-width: 96% !important;}
#comments {max-width: 96% !important;}


+++
Неплохо отображаются картинки;
В телефоне сайт выглядит намного крупнее;
Текст читать удобно (можно еще настроить отдельно шрифт);
Влазят даже большие блоки Адсенс за счет уменьшнния iframe.

---
Картинки немного корежит по высоте. Понятия не имею как исправить;
Бывает, картинку в таблице сжимает до 0. Применять бы стили только к большим изображениям (больше 360px);
Сделать бы перенос (на новую строку) ячеек из больших таблиц. Из-за этого колонки очень уж узкие.

Очень хочется совет - как бы до ума довести.

Добавлено через 23 часа 39 минут
Покопался еще немного с кодом. Думаю использовать еще псевдоклассы сss :after, :before.

D.iK.iJ 14.11.2014 18:51

Долго тупил, но с картинками справился как-то так:

Код:

@media screen and (max-width: 650px) {
img {max-width: 96% !important; height: auto !important;}
iframe, textarea, input, button, submit, video, object, embed {max-width: 99% !important;}
table, span, div, ins {max-width: 100% !important;}
}


D.iK.iJ 27.01.2015 14:43

Чтоб не потерять ссылку на проверку оптимизации в Гугле: https://developers.google.com/speed/pagespeed/insights/

Cyber-Gateway 28.01.2015 23:50

Cпасибо за идею.

D.iK.iJ 29.01.2015 09:52

Цитата:

Сообщение от Cyber-Gateway (Сообщение 1432983)
Cпасибо за идею.

Гляньте еще на Серче. Там побольше тема: http://searchengines.guru/showthread.php?t=873867

D.iK.iJ 02.02.2015 21:21

Ура! Я получил свои 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. Фаерфокс что-то тупит и не переносит таблицу на новую строку.

MonAmur 02.02.2015 21:55

Цитата:

Да мне плевать, как мой сайт видится в мобильных устройствах. Мне, что, остаток жизни потратить, выискивая и устраняя ошибки, чтобы потрафить этим козлам из Америки? Итак урезали выдачу и, соответственно, посещаемость - в поиске гугля всего 14% от общего (более 4200) количества проиндексированных им страниц сайта. Хрена с два я что сделаю! Кому интересно, тот всегда находит способ зайти на сайт, чтобы нормально видеть его. А то в "исправлении ошибок" еще написали, что на сайте шрифт слишком мелкий. Я, что, идиот, на каждой странице шрифт менять? Может, еще зад им поцеловать? Пусть мой целуют. Плевать на их санкции, русские не сдаются, даже когда погибают.
бгггг

D.iK.iJ 02.02.2015 21:58

Да меня за*кол****о, что сам с телефона тыкаю вечно не на те ссылки. Хоть дизайн и резиновый.
А раз стал копать адаптивную рекламу гугла, то и тут перепилил заодно. :)

Делов-то...

DVE 14.03.2015 19:58

D.iK.iJ, спасибо за проделанную работу и за подробный отчет!

D.iK.iJ 14.03.2015 22:03

Цитата:

Сообщение от DVE (Сообщение 1436002)
D.iK.iJ, спасибо за проделанную работу и за подробный отчет!

Не помню, добавлял ли я в тему, но 100% рабочий вариант - как сделать чтобы таблицы смещались друг под друга без проблем в фаерфоксе, это обернуть их в див:
Цитата:

<div style="display: inline-block; min-width: 200px; width: 30%;" align="left">
Конечно, min-width: 200px; width: 30% - это просто для примера.

А один align="left" style="float: left;" примененный к таблице дает неплохие такие глюки. А примененные к 2 таблицам - еще более странное поведение :)


Часовой пояс GMT +3, время: 00:33.

Работает на vBulletin® версия 3.8.7.
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Перевод: zCarot
SAPE.RU — система купли-продажи ссылок с главных и внутренних страниц сайтов.