- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Для тянущегося дизайна поэкспериментировал и использую такое:
В стилях вот такое:
@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.
Картинки немного корежит по высоте. Понятия не имею как исправить;
возможно это
height=device-height
лишнее
возможно пригодится - http://developers.google.com/speed/pagespeed/insights/
возможно это
height=device-height
лишнее
Сейчас попробую. По идее, у меня у картинок (на сайте) есть своя высота. пикселей 400. И все получается вытянутым на мобильнике. А когда я ставлю высоту в стилях любой % - картинки исчезают вообще.
возможно пригодится - http://developers.google.com/speed/pagespeed/insights/
Спасибо. Там у гугла упоминается вот такая ссылка: http://www.html5rocks.com/en/mobile/responsivedesign/
В общем, там и прочитал про такую адаптацию. Жаль, перевожу не очень быстро.
С картинками справился, хоть и тормозил довольно долго:
@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;}
}
P.S. Тест от Гугл "Mobile-Friendly Test" одобрил этот метод.
Ну и
86 / 100 Удобство для пользователей.
srcset для мобильных очень актуален.
srcset для мобильных очень актуален.
Почитал про него на Хабре: http://habrahabr.ru/post/190464/
Что-то мне подсказывает, что не буду я держать 100500 разных картинок для пользователей дисплеев Ретина. Скажу даже больше - в лучшем случае CSS 3 спасет отображение сайта.
Дополню, что еще обязательно надо подключать вот это (зависит от jQuery):
Иначе под IE8 весь код в @media будет выполнятся вне зависимости от ширины экрана, т.е. даже на десктопе.
jQuery - зло :)
Особенно мило, когда на статичном сайте в 2 строчки подключают 5-6 библиотек по ***фига мегабайт.
DiKiJ, можно что-то придумать если есть 2 или 3 колонки?
DiKiJ, можно что-то придумать если есть 2 или 3 колонки?
С таблицами у меня 2 колонки нормально получилось ужать. А вот с 3 ничего особо толкового не придумал.
Планирую переделать их на DIV и CSS как тут: http://htmlbook.ru/layout Тогда при уменьшении ширины экрана они просто пойдут одна под другой.
Ну и как вариант - попробовать что-то сделать с меню на JavaScript. Но мне все еще хотелось бы его не вмешивать, а обойтись CSS :(