Опции на стороне сервера для доставки различной структуры страниц (HTML) на разные мобильные устройства - PullRequest
6 голосов
/ 17 августа 2011

Я изучаю лучшие практики для разработки мобильных сайтов в «классическом» стиле, то есть мобильных сайтов, которые доставляются и воспринимаются как мобильные HTML-страницы по сравнению с небольшими приложениями JavaScript (jQuery Mobile, Sencha и т. Д.).

Существует два преобладающих подхода:

  1. Обеспечение одинаковой структуры страницы (HTML) для всех мобильных устройств, а затем использование медиазапросов CSS или JavaScript для улучшения взаимодействия с более функциональными устройствами.
  2. Предоставляет совершенно отличную структуру страницы (и, возможно, контент) для устройств с расширенными возможностями.

Меня особенно интересуют лучшие практики для подхода second . Два хороших примера:

  1. Мобильный сайт MIT: отличается для Blackberry и мобильных телефонов (меньше), чем для устройств iOS и Android, но доступен по тем же URL-адресам - http://m.mit.edu/

m.mit.edu side-by-side on two different devices

  1. Мобильный сайт CNN: то же самое - http://m.cnn.com/

m.cnn.com side-by-side on two different devices

Я хотел бы услышать от людей из SO, которые действительно работали над чем-то вроде этого, и могут объяснить, каковы лучшие практики для предоставления такого типа зависимой от устройства структуры / контента / опыта.

Мне не нужен учебник по обнаружению мобильных пользовательских агентов, или WURFL, или любой из концепций, охватываемых другими (замечательными) SO-потоками, такими как этот . Я использовал jQuery Mobile и Sencha Touch, и я знаком с большинством подходов для предоставления final mobile Experience, так что никаких указателей там тоже не требуется, спасибо.

Что я действительно хотел бы понять, так это то, как эти специфические типы взаимодействия предоставляются с точки зрения обнаружения и доставки на стороне сервера на основе групп пользовательских агентов - где есть одна урезанная структура страницы (другой HTML), доставляемая в одна группа устройств и другой более богатый тип HTML-документа, доставляемого на более новые устройства, но оба в одном и том же поддомене / URL.

Надеюсь, что все имеет смысл. Большое спасибо заранее.

Ответы [ 3 ]

3 голосов
/ 17 августа 2011

В NPR мы используем «приложение» на стороне сервера для предоставления правильного html / css / etc в зависимости от того, находится ли пользователь на высококлассном устройстве или телефоне более низкого уровня.

Итак, когда мобильное устройство отправляет эхо-запрос на страницу npr.org, наши серверы используют метод обнаружения агента пользователя, чтобы указать им соответствующий m.npr.org.Однажды направленная на URL m.npr.org, веб-приложение, которое написано в groovy , но я думаю, что это может быть несколько вещей, отправляет обратно либо сенсорную версию сайта, либо болеепростой, урезанный контент.Выбор веб-приложения сделан, по крайней мере, в некоторой степени на основе данных WURFL.

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

m.npr.org side-by-side

Вы можете увидеть это в браузере своего рабочего стола, введя m.npr.org, чтобы увидеть урезанный сайт.И вы можете переопределить обнаружение устройства по умолчанию, добавив параметр? Devicegate.client = iPhone_3_0, чтобы увидеть сенсорную версию, которую вы бы увидели, если бы просто зашли на npr.org на своем смартфоне.Если вы посмотрите исходный код, вы увидите, как разные html и css обслуживаются в одном и том же поддомене.

Надеюсь, это поможет увидеть что-то подобное в дикой природе.Имеет ли это смысл?

1 голос
/ 18 августа 2011

У меня есть два примера для вас.

  1. Узнайте о том, как Facebook достигает этого, используя XHP , чтобы получить абстрактный разный вывод для разных наценок: ОдинМобильный сайт для обслуживания тысяч телефонов

    В их фактической реализации будет много хороших вещей, которые, я бы хотел, были доступны.

  2. Я использую фреймворкназывается HawHaw , который позволяет вам написать свое приложение один раз (в объектах PHP или XML-файлах) и вывести правильную разметку на устройство на основе нескольких проверок (принять заголовок, строку агента и т. д.).

1 голос
/ 17 августа 2011

Распространенным способом определения того, какой формат требуется мобильному устройству, является заголовок подтверждения:

application / xhtml + xml> xhtml text / vnd.wap.wml> Старые страницы wml wap.,.

На более новых устройствах, которые могут обрабатывать все форматы html рабочего стола, вы можете использовать пользовательский агент.

Затем вам нужно спросить себя, что вы хотите сделать:

Переключиться на другую таблицу стилей (работает только с новыми устройствами).Переключитесь на другую логику представления, такую ​​как создание шаблонов страниц wml.Перейдите на полную другую страницу.

Я думаю, что второй подход - лучший.Многие веб-фреймворки позволяют легко переключаться на другую логику представления, не переписывая остальные (шаблон mvc во всей красе).

...