Мобильная определенная разработка сайта.С чего начать?

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

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

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

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

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

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

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

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

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

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

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

Как упоминал Нейт Бросс, вам следует оптимизировать для сенсорных устройств. К сожалению, очень сложно узнать, есть ли у устройства сенсорный экран или нет, поскольку для него нет медиа-запроса. Вы можете выполнять сниффинг пользовательского агента для некоторых устройств, но я не рекомендую это делать. Подробное обсуждение здесь: Оптимизация веб-сайта для сенсорных устройств

На данный момент я обнаруживаю сенсорные события (за исключением Chrome). Если это вернет истину, я ввожу сенсорный 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 и, конечно же, Создание приложений для iPhone с помощью HTML, CSS и JavaScript от Джонатана Старка.

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

Многие крупные публикации используют это, и я тоже. Фактически, Ars Technica (на которую Нейт Бросс указал в предыдущем ответе) использует эту службу для отображения своего мобильного контента.

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

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

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

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

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

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