Ищем подход для программирования мобильного сайта для любого устройства. Есть ли?

Question

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

Существуют ли особые подходы для распознавания устройства и рендеринга кода в соответствии с ним?

Какие инструменты и языки программирования требуются?

Моей первой мыслью было сохранить сайт в формате XML, который будет анализироваться в зависимости от устройства.

Вы должны учитывать старые телефоны, даже устройства с поддержкой только wap.

Например: мобильный сайт должен распознавать Nokia N75 и отображать / отправлять код, который выглядит оптимально для этого устройства. То же самое с iPhone или Motorola Razr.

Answer 1

XML - это путь.

С этого момента вы можете анализировать теги Агента в запросе и действовать по ним.

Оттуда вы можете выбрать (при условии, что устройство поддерживает его), чтобы устройство отображало его с помощью XSLT, или вы можете применить XSLT на своем конце и передать соответствующий язык разметки для устройства.

В итоге вы получаете определенный «рендеринг» для каждого устройства. В идеале, чем более совместимы устройства с обычными браузерами, тем ближе будет финальный XSLT друг к другу. Но у вас все еще будет версия для каждого поддерживаемого вами устройства.

Прелесть этого в том, что вы можете добавлять устройства постепенно, если позволяет время и спрос. И когда устройства сходятся, вы приобретаете ценность, будучи в состоянии объединить ваши визуализации. Кроме того, ваш сервер остается неизменным, несмотря ни на что.

Наконец, он также отлично работает и для не мобильных устройств.

Да, бремя поддержки различных устройств - это бремя, но это правда рынка.

Answer 2

Существует множество проблем, связанных с разработкой мобильных веб-сайтов. Чтобы сделать это хорошо, требуется много времени и усилий, поскольку телефоны имеют такую ​​различную поддержку веб-стандартов. Есть инструменты, которые делают это для вас, такие как Mobile Web Toolkit и Vodafone's PartnerMl. Они заставляют вас писать свои страницы, используя специальные теги XML, которые описывают ограниченный набор элементов и стилей, которые можно отобразить на странице. Телефон запрашивает эти xml-страницы, а серверное программное обеспечение перехватывает запрос, проверяет тип телефона (пользовательский агент) и отправляет обратную разметку, соответствующую этому телефону. Недостаток этой системы в том, что она очень негибкая; вы ограничены набором XML-элементов, которые предоставляет инструмент, а не полной гибкостью HTML.

Если вы хотите сделать это самостоятельно, по сути, вы должны сделать следующее.

1. Используя серверный код, проверьте User Agent в заголовке Http. Это говорит вам, какой телефон / браузер сделал запрос
2. Вывести соответствующую разметку и CSS для этого пользовательского агента.

Полезными инструментами являются надстройка User Agent Switcher для Firefox. Используя это, вы можете, например, посетить веб-сайт BBC , представившись различными устройствами. Вы увидите, что BBC выводит 3 или 4 версии своей разметки, а также 3 или 4 разные версии CSS, в зависимости от агента пользователя.

mobiForge содержит полезную информацию. WURFL и DeviceAtlas - это базы данных, которые позволяют вам определить возможности устройства, сделавшего запрос.

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

Answer 3

Вы можете проверить WURFL

Answer 4

В настоящее время не существует хороших инструментов для этого. Хорошей практикой является соблюдение различных стандартов W3C в отношении доступности (таких как WCAG, XHTML и т. Д.). Если вы сделаете свой веб-сайт максимально доступным, он станет более адаптируемым. (независимо от устройства, размера экрана, с сенсорным экраном или без него ...)

Если вам нужна дополнительная информация, вы можете прочитать одну из моих статей о доступности веб-сайтов здесь, если хотите: Руководство по перемещению веб-сайта на мобильном устройстве.

Однако вы можете использовать некоторые метатеги, чтобы веб-браузер телефона мог настраивать содержимое для iPhone следующим образом:

<meta name="viewport" content="width=device-width">

Answer 5

Одним из способов является использование строгого HTML с очень четкой семантикой и минимумом трюков css. Используйте только относительные меры (например, em и %). Доверьтесь значениям по умолчанию для браузеров, потому что они в любом случае оптимальны для каждого устройства, более или менее.