2010-05-20 3 views
10

Я начинаю процесс изучения внутренних и внешних сайтов для мобильных веб-браузеров. Есть ли хорошие ресурсы/сообщества в Интернете, которые обсуждают проблемы разработки мобильных конкретных сайтов?Разработка мобильных устройств для мобильных устройств. Когда начать?

Первоначальное понимание заключается в том, что для покрытия различных телефонов вам необходимо создать один сайт, который включен для браузеров с движком webkit (iphone, android и т. Д.) И еще одним базовым сайтом для других старых браузеров, является это предположение правильным ?

И что именно означает создание для webkit? Как это отличается от использования javascript/css/html? Это одно и то же, за исключением того, что вы ограничиваете себя функциями webkit и css? Я посмотрел сайт webkit, но в этих терминах он не объяснял.

Есть ли какой-либо другой snafus, который мне нужно учитывать при разработке для мобильных браузеров?

ответ

1

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

Webkit - это движок, используемый Safari (мобильным Safari), Chrome и браузером Andriod (мобильный Chrome?), Вы можете использовать стандартные Javascript, XHTML и CSS, главное, сделать ваш сайт «fat-finger- дружественных ", поскольку эти устройства управляются сенсорными экранами.

Что я имею в виду под словом «fat-finger-friendly», так это то, что у вас есть большие ссылки/кнопки, которые легко ударить пальцем. Большинство мобильных браузеров хорошо аппроксимируют, какую ссылку вы намеревались нанести, но если у вас есть Многие вещи, застрявшие вместе, часто ошибаются.

Еще одно изображение - это размер экрана и, следовательно, ширина/высота вашего сайта.

Лучшая иллюстрация, которую у меня есть, от Ars Technica - ознакомьтесь со своим сайтом в браузере вашего рабочего стола, а затем просмотрите их сайт в своем мобильном браузере. Его очень гладкая версия сайта. (http://www.arstechnica.com/)

1

Webkit - это механизм рендеринга, который позволяет веб-браузерам визуализировать веб-страницы. Он предоставляет набор классов для отображения веб-контента в окнах и реализации различных функций, предоставляемых браузером (таких как ссылки, fwd/backward и т. Д.).

Вам не нужно создавать разные сайты для разных движков рендеринга, таких как webkit. Проектирование мобильного веб-сайта должно учитывать размер экрана и то, как разные компоненты выглядят/ведут себя в разных механизмах рендеринга.

Посмотрите на это question для получения дополнительной информации о том, как создать мобильный сайт.

1

Если вы хотите поддерживать старые версии браузера, вам необходимо иметь несколько сайтов. Но сначала взгляните на статистику мобильных браузеров, чтобы решить, стоит ли это. Если вы просто хотите, чтобы ваш существующий сайт работал на iPhone/Android или другие телефоны с браузерами A-grade, вы можете настроить его с помощью мобильного CSS (для небольших экранов). Но чтобы получить хорошую производительность на мобильных устройствах на медленных/ненадежных подключениях, вам, вероятно, потребуется отдельный разделитель html.

У Apple есть очень хорошее руководство, которое поможет вам оптимизировать ваш сайт для iPhone. Большинство из них также будут работать на современных мобильных браузерах: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Peter Paul Koch провел отличные исследования в различных мобильных браузерах.У него есть несколько статей, но это хороший старт: http://www.quirksmode.org/mobile/browsers.html

Как упомянуто выше, Nate Bross, вы должны оптимизировать работу сенсорных устройств. К сожалению, очень сложно узнать, имеет ли устройство касание или нет, поскольку для него нет медиа-запросов. Вы можете выполнять фальсификацию пользовательского агента для некоторых устройств, но я не рекомендую его. Больше обсуждений здесь: Optimize website for touch devices

На данный момент я обнаруживаю события касания (исключая для Chrome). Если это возвращает true, я вставляю сенсорный CSS. Немного противно, но другие варианты хуже:

function() { 
    if(/Chrome/i.test(navigator.userAgent)) { 
     return false; 
    } 
    try { 
     document.createEvent("TouchEvent"); 
     return true; 
    } catch (e) { 
     return false; 
    } 
} 

Вы специально попросили сайтов для мобильных веб-браузеров, но вы можете также проверить возможности создания мобильных веб-приложений. Похоже, iPhone-приложение (или Android), но оно построено с помощью HTML5. Вы можете делать симпатичные анимации с CSS3 в изображении webkit, а iPhone также имеет метатеги, чтобы скрыть панели навигации Safari. Затем пользователи могут добавлять закладки на свой домашний экран, и это будет работать так же, как и обычное приложение для iPhone. Конечно, вы ограничены браузером и его производительность. Но вы можете создавать многоплатформенные приложения :) HTML5 + JS - это единственный язык для мобильных мобильных устройств, одобренный Стива Джобса, и с помощью PhoneGap вы даже можете попасть в AppStore! Если веб-приложение звучит интересно, вы должны проверить jQTouch, jQuery CSS Transition plugin и, конечно, Building iPhone apps with HTML, CSS and JavaScript от Jonathan Stark.

1

Если ваш сайт очень прост (доставка только содержание), я хотел бы предложить услуги, как mobify: http://mobify.me/

Много больших публикаций использовать его, и я тоже. Фактически, Ars Technica (на что указал Nate Bross в более раннем ответе) использует эту услугу для отображения своего мобильного контента.

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

1

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

Один простой веб-сайт HTML5 будет работать и во всех мобильных браузерах и на настольных браузерах.

Красота последних разработок HTML5 заключается в том, что вы можете использовать новые функции Iphone/Android, такие как Geolocation, а старые браузеры просто игнорируют JS-код, если вы тщательно разместите его в инструкциях try catch.

Для проблем с «жирным пальцем» вы можете использовать другой CSS, который делает кнопки больше, если вы действительно должны. Хорошие браузеры должны делать кнопки по умолчанию легко нажатыми в любом случае.

Сохраните это, и вам не придется видеть эти фрагментированные & дорогостоящие подходы, зависящие от устройства. Напишите HTML5 вручную и используйте validator. Удачи!

Смежные вопросы