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