Этот сайт существует на доходы от рекламы.
Пожалуйста, выключите AdBlock.
Вернуться   Форум об интернет-маркетинге > >
Ответ
 
Опции темы
Старый 12.11.2014, 22:24   #1
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,535
Репутация: 173144
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn Аккаунт в Telegram

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

Для тянущегося дизайна поэкспериментировал и использую такое:
PHP код:
<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);
Сделать бы перенос (на новую строку) ячеек из больших таблиц. Из-за этого колонки очень уж узкие.

Очень хочется совет - как бы до ума довести. Думаю, можно еще псевдоклассы сss :after, :before.
__________________
Адаптивный дизайн в 2 строчки (внизу). + Принимаю заказы любой сложности.
Коротко про заработок в сети и эксперименты по продвижению.
DiKiJ вне форума   Ответить с цитированием
Сказали спасибо 6 пользователей:

Реклама
Старый 12.11.2014, 22:29   #2
domen4you
Профессор
 
Регистрация: 09.03.2013
Сообщений: 566
Репутация: 42537

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

Цитата:
Сообщение от DiKiJ Посмотреть сообщение
Картинки немного корежит по высоте. Понятия не имею как исправить;
возможно это
height=device-height
лишнее

возможно пригодится - http://developers.google.com/speed/pagespeed/insights/
domen4you вне форума   Ответить с цитированием
Сказали спасибо 2 пользователей:
Старый 12.11.2014, 22:38   #3
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,535
Репутация: 173144
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn Аккаунт в Telegram

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

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

Цитата:
Сообщение от domen4you Посмотреть сообщение
возможно пригодится - http://developers.google.com/speed/pagespeed/insights/
Спасибо. Там у гугла упоминается вот такая ссылка: http://www.html5rocks.com/en/mobile/responsivedesign/
В общем, там и прочитал про такую адаптацию. Жаль, перевожу не очень быстро.
DiKiJ вне форума   Ответить с цитированием
Старый 14.11.2014, 19:14   #4
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,535
Репутация: 173144
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn Аккаунт в Telegram

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

С картинками справился, хоть и тормозил довольно долго:
Код:
@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;}
}
DiKiJ вне форума   Ответить с цитированием
Сказали спасибо:
Старый 21.11.2014, 23:28   #5
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,535
Репутация: 173144
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn Аккаунт в Telegram

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

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

Ну и
86 / 100 Удобство для пользователей.
DiKiJ вне форума   Ответить с цитированием
Старый 22.11.2014, 00:51   #6
ortegas
Академик
 
Аватар для ortegas
 
Регистрация: 29.05.2008
Сообщений: 1,994
Репутация: 110162

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

srcset для мобильных очень актуален.
ortegas на форуме   Ответить с цитированием
Сказали спасибо:
Старый 22.11.2014, 19:57   #7
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,535
Репутация: 173144
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn Аккаунт в Telegram

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

Цитата:
Сообщение от ortegas Посмотреть сообщение
srcset для мобильных очень актуален.
Почитал про него на Хабре: http://habrahabr.ru/post/190464/
Что-то мне подсказывает, что не буду я держать 100500 разных картинок для пользователей дисплеев Ретина. Скажу даже больше - в лучшем случае CSS 3 спасет отображение сайта.
DiKiJ вне форума   Ответить с цитированием
Старый 23.11.2014, 01:27   #8
Stayron
Дипломник
 
Регистрация: 03.03.2008
Сообщений: 87
Репутация: 13348
Социальные сети

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

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

Код:
<!--[if lt IE 9]>
	<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Иначе под IE8 весь код в @media будет выполнятся вне зависимости от ширины экрана, т.е. даже на десктопе.
Stayron вне форума   Ответить с цитированием
Старый 23.11.2014, 17:09   #9
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,535
Репутация: 173144
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn Аккаунт в Telegram

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

jQuery - зло
Особенно мило, когда на статичном сайте в 2 строчки подключают 5-6 библиотек по ***фига мегабайт.
DiKiJ вне форума   Ответить с цитированием
Сказали спасибо 2 пользователей:
Старый 25.12.2014, 11:52   #10
joost
Особый статус
 
Регистрация: 08.06.2006
Сообщений: 5,317
Репутация: -109811

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

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

Метки
meta , адаптивность , верстка , сss , сайт




Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход



Текущее время: 00:14. Часовой пояс GMT +3.

Регистрация Справка Календарь Поддержка Все разделы прочитаны