Comments 32
Отлично! Как раз сегодня пригодится!
Как то раз наткнулся на сайт, демонстрирующий такого рода сайты, потом куда то потерял. Спасибо что напомнили.
Весьма интересно, как это будет работать в Opera Mini.
На windows phone 7 выглядит отлично, за исключением видео превьюшки.
Классна штука
В подкасте "сделайте мне красиво" всплывала ссылочка на коллекцию сайтов которые поддерживают Media Queries. Очень познавательно, рекомендую.
Как же хочется чтобы все это работало прямо в HTML и CSS без всяких плагинов
На iPad откройте в landscape поверните в portrait и обратно в landscape
Не у всех есть iPad-ы, не могли бы просветить что произойдет?
Произойдёт zoom, где-то 25% страницы справа окажется вне поля зрения.
Недавно подгонял кое-что под iPad и iPhone — обнаружилось что отключение скейла не по душе некоторым пользователям iPhone, которые привыкли видеть миниатюру нормальной страницы и скейлить её там где им нужно
Недавно подгонял кое-что под iPad и iPhone — обнаружилось что отключение скейла не по душе некоторым пользователям iPhone, которые привыкли видеть миниатюру нормальной страницы и скейлить её там где им нужно
Потестил на Nook Color — андроид планшете с разрешением 1024х600 (вроде у айпада такое же) в стоковом браузере — все ок отображается как надо.
На правах оффтопа:
Почему когда IE отображает что то не так как остальные все кричат что это проблема IE и т.д.
если айпад отображает что то не так — это проблема верстальщика а не айпада :)
На правах оффтопа:
Почему когда IE отображает что то не так как остальные все кричат что это проблема IE и т.д.
если айпад отображает что то не так — это проблема верстальщика а не айпада :)
> Потестил на Nook Color — андроид планшете с разрешением 1024х600 (вроде у айпада такое же) в стоковом браузере — все ок отображается как надо.
Дело не в разрешении, этот баг есть только в Safari на iPad habrahabr.ru/blogs/webdev/119127/#comment_4471001
Дело не в разрешении, этот баг есть только в Safari на iPad habrahabr.ru/blogs/webdev/119127/#comment_4471001
Кстати, для 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
/*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
Ага тоже недавно делал дизайн по iPad используя CSS3 Media Queries. Немного помучался ввиду отсутствия самого устройства на руках, но в итоге все удачно.
Это баг Safari, решается с помощью небольшого js — wedeal.ru/blog/oshibka-safari-na-ipad-pri-povorote-iz-portrait-v-landscape/
Ссылка в тему — Different Stylesheets for Differently Sized Browser Windows
Первые два случая (normal и narrow) для этого макета вполне можно объединить кодом второго с заданым для контейнера max-width.
Вот на андроиде и в портретном и ландшафтном, всё ок. В том числе при повороте.
Для совместимости со старыми браузерами, не проще использовать доп. класс для каждого макс. разрешения, скажем .w650 .w480, и добавлять его в требующиеся элементы javascript'ом в начале, проверив ширину окна (window.screen.width)? Все же меньше 16 кб для css3-mediaqueries.js выйдет, да и быстрее.
Сайт W3C использует что-то похожее.
Спасибо, полезно.
После прочтения начал искать более умный js, потому что этот кроссбраузерный (очень много проверок), а подключается через условные комментарии. Можно срезать наверное 1/4.
Да и в 94% случаев используется jQuery, а в скрипте, например, свой DOMReady.
И вот случайно нашел презентацию:
www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu?from=ss_embed
Очень интересный взгляд. Никогда не думал о дизайне сайта начиная с мобильной версии и прогрессивного улучшения до десктопной.
После прочтения начал искать более умный js, потому что этот кроссбраузерный (очень много проверок), а подключается через условные комментарии. Можно срезать наверное 1/4.
Да и в 94% случаев используется jQuery, а в скрипте, например, свой DOMReady.
И вот случайно нашел презентацию:
www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu?from=ss_embed
Очень интересный взгляд. Никогда не думал о дизайне сайта начиная с мобильной версии и прогрессивного улучшения до десктопной.
Проблема с масштабированием это ошибка Safari на iOS, вот решение — wedeal.ru/blog/oshibka-safari-na-ipad-pri-povorote-iz-portrait-v-landscape/
> Сбрасываем HTML5 элементы в block
Сбрасывать — это избавляться от чего-то, а не добавлять display:block.
Сбрасывать — это избавляться от чего-то, а не добавлять display:block.
не хватает описания правил CSS для печати документа — чтобы при выводе на печать выводилось только содержимое div id=«content» (ну и адрес сайта)
Что-то не работает в IE8
Что-то не работает в IE8
Есть подозрение, что нужно сменить полузаброшенный css3-mediaqueries.js на respond.js — Responsive web design и Internet Explorer
Есть подозрение, что нужно сменить полузаброшенный css3-mediaqueries.js на respond.js — Responsive web design и Internet Explorer
Sign up to leave a comment.
Адаптивный и мобильный дизайн с CSS3 Media Queries