Comments 43
Спасибо!
приятно-полезные нюансы
Очень хорошая статья, и прекрасная манера подачи материала. Продолжайте публиковаться, пожалуйста.
>Дополнительно ожидается появление релиза jQuery Mobile.
А разве еще не вышел?
А разве еще не вышел?
Часто сталкиваюсь с тем, что разработчики настолько забивают на мобильные устройства, что не возможно перейти на страницу контактов в поисках контактных телефонов или карты, а потребность возникает как раз когда есть доступ в интернет только через телефон.
Вместо code.google.com/p/mobileesp/ можно использовать детектор от уважаемого Яндекса: api.yandex.ru/detector/
Стоит также упомянуть совершенно магический UIKit.
Это CSSка, отображающая обычную разметку в айфон-стиле. Например совершенно обычная HTML-ка с не менее обычным ul-li(...) без каких-либо классов будет выведена как дефолтный айфоновский лист.
Это CSSка, отображающая обычную разметку в айфон-стиле. Например совершенно обычная HTML-ка с не менее обычным ul-li(...) без каких-либо классов будет выведена как дефолтный айфоновский лист.
Спасибо, как раз о чем-то таком думал последние дни :)
А нет ли где-нибудь обзора/статистики, какие разрешения экрана/браузеры/ос/js/html/css наиболее популярны в мобильном рунете? Вообще этот рынок не представляю, девайса соответствующего нет (wap сейчас вообще востребован?), а пользователи просят ввести поддержку, жалуясь и на глюки, и на общее неудобство UI под Opera Mini — на что нужно ориентироваться?
А нет ли где-нибудь обзора/статистики, какие разрешения экрана/браузеры/ос/js/html/css наиболее популярны в мобильном рунете? Вообще этот рынок не представляю, девайса соответствующего нет (wap сейчас вообще востребован?), а пользователи просят ввести поддержку, жалуясь и на глюки, и на общее неудобство UI под Opera Mini — на что нужно ориентироваться?
Если у вас есть сайт, то такую статистику можно получить, используя Google Analytics.
Ну вон у нелюбимого тут вконтактика есть аскетичная версия для опер мини — m.vkontakte.ru/ (ссылочки в столбик) и айфон-веб-приложение i.vkontakte.ru/.
Оба кстати чудесно работают и в хроме.
Оба кстати чудесно работают и в хроме.
Теги статьи запятыми разделите.
А для анализа не забывайте про такой чудесный инструмент как Яндекс.Метрика.
С появлением Метрики, в Google Analytics вообще перестал заходить.
С появлением Метрики, в Google Analytics вообще перестал заходить.
wurfl.sourceforge.net/
The WURFL is an XML configuration file which contains information about capabilities and features of many mobile devices.
The WURFL is an XML configuration file which contains information about capabilities and features of many mobile devices.
ещё:
apple-touch-icon — работает и на андроиде
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0"/> <link rel="apple-touch-icon" href="/app-logo.png"/>
apple-touch-icon — работает и на андроиде
Все проблемы начинаються когда открываешь сайт с оперы мини. Ей просто наплевать на все стили и виевпорты. Их сервер просто режет CSS как ему хочется и отображает сайт как ему хочется.
Если есть об этом статьи буду рад за ссылки.
Если есть об этом статьи буду рад за ссылки.
Ну и Safari Reference Library в помощь.
Такое впечатление что авторы последних статей по вёрстке под мобильные устройства находятся в какой-то параллельной реальности где из телефонов встречаются только iPhone и Android с поддержкой свежайших веб-стандартов. Было бы интересно посмотреть реальную статистику (например у контент-провайдеров) по моделям телефонов и браузерам, особенно в России.
Может быть я драматизирую, но если ориентироваться на более-менее массовый сегмент пользователей, то всё значительно сложнее:
Ну и вот ещё: www.passani.it/gap/
Может быть я драматизирую, но если ориентироваться на более-менее массовый сегмент пользователей, то всё значительно сложнее:
- С разрешениями экранов полный зоопарк, соответственно графику и размеры элементов в пикселах нужно либо сводить к минимуму, либо делать несколько версий сайта что увеличивает количество работы в разы
- Зоопарк браузеров и их версий на порядок превосходит десктопный. Большинство браузеров содержит массу глюков, устарело и возможности для обновления нет, т.к. вендорам интереснее продавать новые модели телефонов нежели поддерживать старые
- Операторские шлюзы, которые вытворяют всякие гадости с заголовками, пытаются самостоятельно сжимать/оптимизировать контент и даже имитировать поддержку cookie. И ещё умолчательные настройки точек доступа загоняющие клиентов в wap.
- Javascript? А кто сказал что javascript на устройстве вообще есть или не обрезан?
- CSS? Ну-ну. Пляски с хаками под десктопный IE покажутся вам сказкой по сравнению с той кашей что творится на мобильных устройствах
- Про шрифты даже можно не говорить
Ну и вот ещё: www.passani.it/gap/
2. Не поддерживается тег
input type=«file» /
, поскольку нет доступа к файловой структуре.
это касается не только IPhone но и целого ряда старых мобил.
Что касается UserAgent и разрешения экрана, то есть пополняемая библиотека wurfl и Tera_WURFL — PHP MySQL driven WURFL
Она позволяет не прибегать к помощи Гугла и Яндекса
input type=«file» /
, поскольку нет доступа к файловой структуре.
это касается не только IPhone но и целого ряда старых мобил.
Что касается UserAgent и разрешения экрана, то есть пополняемая библиотека wurfl и Tera_WURFL — PHP MySQL driven WURFL
Она позволяет не прибегать к помощи Гугла и Яндекса
2. Поставьте display: none; на неважных элементах
лучше все таки вырезать блоки из шаблона (меньше трафик, меньше DOM дерево) — все равно у вас другой будет шаблон для мобильной версии
лучше все таки вырезать блоки из шаблона (меньше трафик, меньше DOM дерево) — все равно у вас другой будет шаблон для мобильной версии
Теги HTML5 позволяют проводить валидацию на стороне браузера и открывать соответствующий набор символов.
Теги ничего не позволяют, позволяет браузер.
не люблю @import, скажите
<link rel="stylesheet" media="orientation: portrait" href="example.css" />или
@media (orientation: portrait) { … } насколько поддерживается?
У iPhone нет проблем с font-face, просто ему нужно давать шрифты в формате SVG. Как и Chrome < 4.x.
У вас опечатка в строчке, пропущен дефис:
/>
Должно быть max-device-width:480px
Двадцать минут пытался понять, где ошибка и почему не работает)
/>
Должно быть max-device-width:480px
Двадцать минут пытался понять, где ошибка и почему не работает)
Sign up to leave a comment.
Как создать вебсайт для мобильных устройств