Последние Webkit и Opera:
Для iPhone Safari, Opera Mobile и Webkit на Android разработки похожи (, но не идентичны ), и разработка для них довольно проста.
Вы можете положиться на CSS2.1 и JavaScript + DOM (но будьте осторожны с событиями пользовательского интерфейса ). Вы можете обойтись без обслуживания вашего обычного веб-сайта с помощью нескольких изменений в таблицах стилей.
Хитрость в том, чтобы обслуживать эти таблицы стилей. Не используйте User-Agent строку .
Поскольку некоторые мобильные браузеры читают портативные носители, а некоторые настаивают на стилях экрана и притворяются, что имеют экран шириной 960 пикселей (iPhone: /), вам нужно будет предоставить мобильную таблицу стилей с обоими:
<link media="handheld" ...>
<link media="screen and max-device-width:480px" ...>
Последний - CSS3 Media Query - очень полезен и работает и с другими мобильными браузерами (его можно использовать в таблицах стилей с @media {}).
Не полагайтесь на :hover или onmouseover, потому что эти события не работают на сенсорных экранах.
onclick задерживается, mousemove может не работать. Пользовательские виджеты DHTML (выпадающие списки, ползунки) и drag'n'drop не будут работать на сенсорных экранах, если вы не используете сенсорные события (которые, к счастью, приняты все новейшие браузеры).
Viewport
В дополнение к проприетарной компании Apple (и IMHO негибкой и нарушающей разделение между разметкой и макетом) <meta name=viewport> взглянем на CSS3 @ viewport , который в настоящее время поддерживается в последней версии Opera как @-o-viewport и, надеюсь, другие будут следовать.
Имитаторы / эмуляторы
Чтобы проверить страницу в Opera Mobile, получите симулятор (или просто более старую версию рабочего стола и выберите «Просмотр» → «Маленький экран»).
Opera Mini особенная, поскольку CSS немного переформатирован, а DHTML выполняется на стороне сервера, что не всегда дает ожидаемые результаты. симулятор доступен .
Android
Вам нужен Android SDK, поиграть с командной строкой, чтобы запустить его неуклюжий пользовательский интерфейс, загрузить кучу пакетов, создать виртуальное устройство с дюжиной неуместных неясных настроек, набраться терпения, чтобы этот монстр загрузил и превратил вентиляторы компьютера в квадрокоптер, а затем вы Можно выполнить тест sss..sss..slooowlyyyy в «Браузере» (мой Intel i5 слишком медленный для симуляции Galaxy Tab - браузер «перестает отвечать» даже до того, как я закончу набирать URL)
Проще достать телефон / планшет с Android и протестировать на реальном устройстве (но избегайте эквивалента плеера Samsung "iPod", так как это мусор с устаревшим программным обеспечением).
Браузер Android действительно причиняет боль всем, кто не любит Linux, - просто чтобы прочитать консоль JS, вам нужно поиграться с удаленными отладочными соединениями и фильтрацией журналов в командной строке.
Firefox Mobile (ранее Fennec)
Доступен симулятор (ссылки для «Windows / Mac OS X / Linux» ниже для мобильных загрузок не для настольной версии, а для мобильных устройств для настольной ОС).
Симулятор очень простой, сам по себе Mobile Firefox действительно хорош, например. overflow:scroll отлично работает, в то время как в браузерах на основе WebKit реализация переполнения может быть очень неинтуитивной и полностью неработающей.
Карманный IE:
PIE для Windows Mobile <7 - это не то же самое, что IE в Windows. Он в основном такой же примитивный и глючный, как и IE4, но (едва) поддерживает некоторые удивительно продвинутые свойства, такие как <code>display:table.
Он читает одновременно и таблицы стилей handheld, и screen, нарушая стандарт и стреляя себе в ногу. Если вы собираетесь поддерживать PIE, поместите ссылку на handheld таблицу стилей последней и переверните / переопределите все правила из стилей экрана в ней.
Во всяком случае, он мертв и трудно получить эмулятор.
Windows Phone 7 в настоящее время поставляется с IE7-подобным, и Microsoft обещала кое-что уровня IE9 позже.
Новый (меньшинство) BlackBerry
Последний браузер BlackBerry на базе WebKit довольно хорош, вы можете относиться к нему как к первоклассному гражданину (см. Сравнение WebKits в верхней части).
В настоящее время наиболее популярны BlackBerry & OpenWave, Blazer и т. Д. :
До BB OS6 это кошмар. Работает только базовый HTML. CSS работает на некоторых моделях, но примитивен и не работает. JavaScript работает только на некоторых моделях, и он невероятно медленный и отсутствует (забудьте даже о базовом DHTML).
В RIM доступен бесплатный симулятор BB (надоедливая регистрация). Если вам не повезло, он будет запускаться правильно один раз , а затем вам придется полностью переустановить его:)
То же самое можно сказать и о сотнях других мобильных браузеров на недорогих телефонах (работающих на подобных OpenWave, в котором имеется приличный симулятор ). Вам нужно будет подготовить для них 1-колоночный базовый урезанный HTML-сайт.
Google Wireless Transcoder
Даже если вы создадите отличный (X) HTML, оптимизированный для каждого мобильного устройства, пользователи Google Mobile Search никогда его не увидят!
Вместо этого каждая страница будет передаваться через «Беспроводной транскодер», который жестоко прерывает код, удаляя все таблицы стилей и сценарии (независимо от того, поддерживает ли их браузер) или даже <font>: (