Pull to refresh

Comments 32

Отлично! Как раз сегодня пригодится!
Как то раз наткнулся на сайт, демонстрирующий такого рода сайты, потом куда то потерял. Спасибо что напомнили.
Весьма интересно, как это будет работать в Opera Mini.
Так и будет, как задумано.
У самой Opera Software все их сайты и внутренние странички браузера (ошибки там) так работают уже лет сто. CSS queries — кагбе боян.

А самое важное в статье упущено — CSS queries для разных DPI. Совсем свежак, недавно появилось, но очень актуально.
На windows phone 7 выглядит отлично, за исключением видео превьюшки.
Как же хочется чтобы все это работало прямо в HTML и CSS без всяких плагинов
Так это и работает прямо в HTML и CSS, без всяких плагинов. Только в новых браузерах. А для старых небольшие костыли, так было, так будет. Впрочем конкретно для этого примера два лишних скриптика включить совсем несложно.
На iPad откройте в landscape поверните в portrait и обратно в landscape
Не у всех есть iPad-ы, не могли бы просветить что произойдет?
Произойдёт zoom, где-то 25% страницы справа окажется вне поля зрения.

Недавно подгонял кое-что под iPad и iPhone — обнаружилось что отключение скейла не по душе некоторым пользователям iPhone, которые привыкли видеть миниатюру нормальной страницы и скейлить её там где им нужно
Потестил на Nook Color — андроид планшете с разрешением 1024х600 (вроде у айпада такое же) в стоковом браузере — все ок отображается как надо.

На правах оффтопа:
Почему когда IE отображает что то не так как остальные все кричат что это проблема IE и т.д.
если айпад отображает что то не так — это проблема верстальщика а не айпада :)
> Потестил на Nook Color — андроид планшете с разрешением 1024х600 (вроде у айпада такое же) в стоковом браузере — все ок отображается как надо.

Дело не в разрешении, этот баг есть только в Safari на iPad habrahabr.ru/blogs/webdev/119127/#comment_4471001
главное не забывать, что содержимое
@media only screen and (orientation:portrait)
сработает не только на iPad, но и на других устройствах

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

Ага тоже недавно делал дизайн по iPad используя CSS3 Media Queries. Немного помучался ввиду отсутствия самого устройства на руках, но в итоге все удачно.
Подтверждаю, на айпаде в ландшафтном режиме жесть.
Первые два случая (normal и narrow) для этого макета вполне можно объединить кодом второго с заданым для контейнера max-width.
Вот на андроиде и в портретном и ландшафтном, всё ок. В том числе при повороте.
Для совместимости со старыми браузерами, не проще использовать доп. класс для каждого макс. разрешения, скажем .w650 .w480, и добавлять его в требующиеся элементы javascript'ом в начале, проверив ширину окна (window.screen.width)? Все же меньше 16 кб для css3-mediaqueries.js выйдет, да и быстрее.
Спасибо, полезно.

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

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

Очень интересный взгляд. Никогда не думал о дизайне сайта начиная с мобильной версии и прогрессивного улучшения до десктопной.
UFO landed and left these words here
> Сбрасываем HTML5 элементы в block

Сбрасывать — это избавляться от чего-то, а не добавлять display:block.
не хватает описания правил CSS для печати документа — чтобы при выводе на печать выводилось только содержимое div id=«content» (ну и адрес сайта)
Only those users with full accounts are able to leave comments. Log in, please.