Адаптивный и мобильный дизайн с CSS3 Media Queries

[@de_arnst]

Отлично! Как раз сегодня пригодится!

[@JiLiZART]

Как то раз наткнулся на сайт, демонстрирующий такого рода сайты, потом куда то потерял. Спасибо что напомнили.

[@Andrewus]

Весьма интересно, как это будет работать в Opera Mini.

[@TiGR]

Так и будет, как задумано.

[@Aux]

У самой Opera Software все их сайты и внутренние странички браузера (ошибки там) так работают уже лет сто. CSS queries — кагбе боян.

А самое важное в статье упущено — CSS queries для разных DPI. Совсем свежак, недавно появилось, но очень актуально.

[@Agent_Smith]

На windows phone 7 выглядит отлично, за исключением видео превьюшки.

[@Tomasina]

Классна штука

[@cyberjunk]

В подкасте "сделайте мне красиво" всплывала ссылочка на коллекцию сайтов которые поддерживают Media Queries. Очень познавательно, рекомендую.

[@dasty]

Как же хочется чтобы все это работало прямо в HTML и CSS без всяких плагинов

[@safron]

Так это и работает прямо в HTML и CSS, без всяких плагинов. Только в новых браузерах. А для старых небольшие костыли, так было, так будет. Впрочем конкретно для этого примера два лишних скриптика включить совсем несложно.

[@SeVit]

На iPad откройте в landscape поверните в portrait и обратно в landscape

[@smileonl]

Не у всех есть iPad-ы, не могли бы просветить что произойдет?

[@SeVit]

Произойдёт zoom, где-то 25% страницы справа окажется вне поля зрения.

Недавно подгонял кое-что под iPad и iPhone — обнаружилось что отключение скейла не по душе некоторым пользователям iPhone, которые привыкли видеть миниатюру нормальной страницы и скейлить её там где им нужно

[@rednaxi]

Потестил на Nook Color — андроид планшете с разрешением 1024х600 (вроде у айпада такое же) в стоковом браузере — все ок отображается как надо.

На правах оффтопа:
Почему когда IE отображает что то не так как остальные все кричат что это проблема IE и т.д.
если айпад отображает что то не так — это проблема верстальщика а не айпада :)

[@Hellcunt]

> Потестил на Nook Color — андроид планшете с разрешением 1024х600 (вроде у айпада такое же) в стоковом браузере — все ок отображается как надо.

Дело не в разрешении, этот баг есть только в Safari на iPad habrahabr.ru/blogs/webdev/119127/#comment_4471001

[@PingMe]

Кстати, для iPad, iPhone можно сделать так:

/*normal styles here */
#wrap {
width:1024px;
}
@media only screen and (orientation:portrait){
/* portrait styles here */
#wrap {
width:768px;
}
}

matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes

[@SeVit]

главное не забывать, что содержимое
@media only screen and (orientation:portrait)
сработает не только на iPad, но и на других устройствах

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)
сработает на любом соответствующем маленьком экране

[@kresh]

Ага тоже недавно делал дизайн по iPad используя CSS3 Media Queries. Немного помучался ввиду отсутствия самого устройства на руках, но в итоге все удачно.

[@Hellcunt]

Это баг Safari, решается с помощью небольшого js — wedeal.ru/blog/oshibka-safari-na-ipad-pri-povorote-iz-portrait-v-landscape/

[@k0rv1n]

Ссылка в тему — Different Stylesheets for Differently Sized Browser Windows

[@Uratsakidogi]

Первые два случая (normal и narrow) для этого макета вполне можно объединить кодом второго с заданым для контейнера max-width.

[@Kaaboeld]

Вот на андроиде и в портретном и ландшафтном, всё ок. В том числе при повороте.

[@MagaSoft]

Для совместимости со старыми браузерами, не проще использовать доп. класс для каждого макс. разрешения, скажем .w650 .w480, и добавлять его в требующиеся элементы javascript'ом в начале, проверив ширину окна (window.screen.width)? Все же меньше 16 кб для css3-mediaqueries.js выйдет, да и быстрее.

[@Rayzor]

Сайт W3C использует что-то похожее.

[@lublushokolad]

Спасибо, полезно.

После прочтения начал искать более умный js, потому что этот кроссбраузерный (очень много проверок), а подключается через условные комментарии. Можно срезать наверное 1/4.
Да и в 94% случаев используется jQuery, а в скрипте, например, свой DOMReady.

И вот случайно нашел презентацию:
www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu?from=ss_embed

Очень интересный взгляд. Никогда не думал о дизайне сайта начиная с мобильной версии и прогрессивного улучшения до десктопной.

[@Hellcunt]

Проблема с масштабированием это ошибка Safari на iOS, вот решение — wedeal.ru/blog/oshibka-safari-na-ipad-pri-povorote-iz-portrait-v-landscape/

[@pepelsbey]

> Сбрасываем HTML5 элементы в block

Сбрасывать — это избавляться от чего-то, а не добавлять display:block.

[@Tomasina]

не хватает описания правил CSS для печати документа — чтобы при выводе на печать выводилось только содержимое div id=«content» (ну и адрес сайта)

[@dom1n1k]

Что-то не работает в IE8

[@Hellcunt]

Что-то не работает в IE8

Есть подозрение, что нужно сменить полузаброшенный css3-mediaqueries.js на respond.js — Responsive web design и Internet Explorer