Форум Сайтостроение Веб-строительство

Оптимизация сайта для планшетов и телефонов - в 2 строчки

12345 6
D.iK.iJ
На сайте с 26.05.2013
Offline
229
D.iK.iJ
16677

Для тянущегося дизайна поэкспериментировал и использую такое: 

<meta name=viewport content="width=device-width, height=device-height, initial-scale=1">

В стилях вот такое: 

@media screen and (max-width: 650px) { // Если ширина экрана меньше 650

img {max-width: 96% !important;}

iframe, table, span, div, textarea, input, button, submit {max-width: 100% !important;}



//Чтобы блоки комментариев не расползались до 500px.

#vk_comments {max-width: 96% !important;}

#fb-comments {max-width: 96% !important;}

#comments {max-width: 96% !important;}

}

+++

Неплохо отображаются картинки;

В телефоне сайт выглядит намного крупнее;

Текст читать удобно (можно еще настроить отдельно шрифт);

Влазят даже большие блоки Адсенс за счет уменьшнния iframe.

---

Картинки немного корежит по высоте. Понятия не имею как исправить;

Бывает, картинку в таблице сжимает до 0. Применять бы стили только к большим изображениям (больше 360px);

Сделать бы перенос (на новую строку) ячеек из больших таблиц. Из-за этого колонки очень уж узкие.

Очень хочется совет - как бы до ума довести. Думаю, можно еще псевдоклассы сss :after, :before.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
domen4you
На сайте с 08.03.2013
Offline
53
domen4you
#1
DiKiJ:
Картинки немного корежит по высоте. Понятия не имею как исправить;

возможно это

height=device-height

лишнее

возможно пригодится - http://developers.google.com/speed/pagespeed/insights/

D.iK.iJ
На сайте с 26.05.2013
Offline
229
D.iK.iJ
#2
domen4you:
возможно это
height=device-height
лишнее

Сейчас попробую. По идее, у меня у картинок (на сайте) есть своя высота. пикселей 400. И все получается вытянутым на мобильнике. А когда я ставлю высоту в стилях любой % - картинки исчезают вообще.

domen4you:

возможно пригодится - http://developers.google.com/speed/pagespeed/insights/

Спасибо. Там у гугла упоминается вот такая ссылка: http://www.html5rocks.com/en/mobile/responsivedesign/

В общем, там и прочитал про такую адаптацию. Жаль, перевожу не очень быстро.

Линк-Арт ну как бы Пришло Mobile-first indexing enabled. Изображения одного размера в
D.iK.iJ
На сайте с 26.05.2013
Offline
229
D.iK.iJ
#3

С картинками справился, хоть и тормозил довольно долго:

@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
На сайте с 26.05.2013
Offline
229
D.iK.iJ
#4

P.S. Тест от Гугл "Mobile-Friendly Test" одобрил этот метод.

Ну и

86 / 100 Удобство для пользователей.

O
На сайте с 29.05.2008
Offline
195
ortegas
#5

srcset для мобильных очень актуален.

D.iK.iJ
На сайте с 26.05.2013
Offline
229
D.iK.iJ
#6
ortegas:
srcset для мобильных очень актуален.

Почитал про него на Хабре: http://habrahabr.ru/post/190464/

Что-то мне подсказывает, что не буду я держать 100500 разных картинок для пользователей дисплеев Ретина. Скажу даже больше - в лучшем случае CSS 3 спасет отображение сайта.

Мобилопригодность(c) - новый алгоритм Покритикуйте please homepage начинающих Размещение изображений сайта на
S
На сайте с 03.03.2008
Offline
91
Stayron
#7

Дополню, что еще обязательно надо подключать вот это (зависит от jQuery): 


<!--[if lt IE 9]>

	<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->

Иначе под IE8 весь код в @media будет выполнятся вне зависимости от ширины экрана, т.е. даже на десктопе.

D.iK.iJ
На сайте с 26.05.2013
Offline
229
D.iK.iJ
#8

jQuery - зло :)

Особенно мило, когда на статичном сайте в 2 строчки подключают 5-6 библиотек по ***фига мегабайт.

J
На сайте с 08.06.2006
Offline
844
joost
#9

DiKiJ, можно что-то придумать если есть 2 или 3 колонки?

D.iK.iJ
На сайте с 26.05.2013
Offline
229
D.iK.iJ
#10
joost:
DiKiJ, можно что-то придумать если есть 2 или 3 колонки?

С таблицами у меня 2 колонки нормально получилось ужать. А вот с 3 ничего особо толкового не придумал.

Планирую переделать их на DIV и CSS как тут: http://htmlbook.ru/layout Тогда при уменьшении ширины экрана они просто пойдут одна под другой.

Ну и как вариант - попробовать что-то сделать с меню на JavaScript. Но мне все еще хотелось бы его не вмешивать, а обойтись CSS :(

Настройка блока РСЯ div слои. в чем Мобилопригодность(c) - новый алгоритм
12345 6

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий