Сайты для iPhone - а как насчет других платформ?
Недавно я читал учебное пособие по Крису Койеру из блога http://css-tricks.com/ № 38: Основы и советы по проектированию для iPhone. Излишне говорить, что я был очень взволнован и предложил парню, что я делаю некоторую работу с обезьяной кода, для того, чтобы мы могли теперь предлагать сайты iPhone его клиентам. Он сказал круто, а как насчет других мобильных устройств? хороший вопрос. Так в чем же заключается разработка веб-сайтов для Android, Blackberry, WindowsMobile и т. Д.? Люди беспокоятся о других платформах? Благодарю.
1 ответ
Недавние 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 не будут работать на сенсорных экранах, если вы не используете сенсорные события (которые, к счастью, были приняты во всех новейших браузерах).
В дополнение к фирменной компании 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, но (едва) поддерживает некоторые удивительно продвинутые свойства, такие как display:table,
Он читает как handheld а также screen Таблицы стилей одновременно нарушают стандарт и стреляют себе в ногу. Если вы собираетесь поддерживать пирог, то поместите ссылку на handheld Таблица стилей последняя и обратная / переопределить все правила из стилей экрана в ней.
Во всяком случае, он мертв и трудно получить эмулятор.
Windows Phone 7 в настоящее время поставляется с IE7-подобным, и Microsoft обещала кое-что уровня IE9 позже.
Новый (меньшинство) BlackBerry
Последний браузер BlackBerry на базе WebKit достаточно хорош, вы можете относиться к нему как к первоклассному гражданину (см. Сравнение WebKits, приведенное в верхней части).
В настоящее время наиболее популярны BlackBerry & OpenWave, Blazer и т.д.:
До BB OS6 это кошмар. Работает только базовый HTML. CSS работает на некоторых моделях, но примитивен и не работает. JavaScript работает только на некоторых моделях, и он невероятно медленный и отсутствует (забудьте даже о базовом DHTML).
Бесплатный бесплатный симулятор BB от RIM (надоедливая регистрация). Если вам не повезло, он запустится правильно один раз, а затем вам придется полностью переустановить его:)
То же самое относится и к сотням других мобильных браузеров на недорогих телефонах (на базе подобных OpenWave, у которой есть достойный симулятор). Вам нужно подготовить для них 1-колоночный базовый урезанный HTML-сайт.
Google Wireless Transcoder
Даже если вы создадите отличный (X)HTML, оптимизированный для каждого мобильного устройства, пользователи Google Mobile Search никогда его не увидят! Вместо этого каждая страница будет передаваться через "Беспроводной транскодер", который жестоко прерывает код, удаляя все таблицы стилей и скрипты (независимо от того, поддерживает ли их браузер или нет), и даже <font>:(