Разрабатывая мобильное приложение, я обнаружил пару вещей, знания о которых мне бы пригодились, когда я начинал. Поэтому я решил написать статью в формате небольших советов. Эти советы больше нацелены на разработку мобильных приложений под PhoneGap, Windows 8 и Firefox OS. Но разработчикам мобильных веб-сайтов тоже могут пригодиться. В конце статьи дам ссылки на то, что в конце концов получилось
Если мы откроем наш пример на телефоне с высотой разрешения 800px и больше, то не увидим цветного блока, т.к. к нему применяется медиа селектор, но когда мы нажимаем на input, чтобы ввести данные, открывается клавиатура и блок появляется (изменяется высота окна), что является немного не логичным течением дел. Решение: Использование Javascript для смены ориентации и смена ориентации на основании свойств screen.availWidth и screen.availHeight. Учтите, что эти свойства не работают в FirefoxOS, как и эвент orientationchange. Подобный код может помочь нам сэкономить немного времени и сил.
Как видно из примера разница между обработкой тач-евентов и клик-евнтов на десктопе составляет ~100 мс и ~400 на мобильных браузерах
Не доверяйте медиа-селекторам.
Особенно, на Android. Медиа селекторы срабатывают при использовании клавиатуры и приходится хендлить и это. Это начинает быть настоящим адом, если наше приложение имеет разный вид для Portrait и Landscape. Хорошо демонстрирует это следующий пример:Если мы откроем наш пример на телефоне с высотой разрешения 800px и больше, то не увидим цветного блока, т.к. к нему применяется медиа селектор, но когда мы нажимаем на input, чтобы ввести данные, открывается клавиатура и блок появляется (изменяется высота окна), что является немного не логичным течением дел. Решение: Использование Javascript для смены ориентации и смена ориентации на основании свойств screen.availWidth и screen.availHeight. Учтите, что эти свойства не работают в FirefoxOS, как и эвент orientationchange. Подобный код может помочь нам сэкономить немного времени и сил.
var displayModeLandscape = false;
var width = 0;
var height = 0;
var setPortrait = function() {
$('html').addClass('portrait').removeClass('landscape');
displayModeLandscape = false;
};
var setLandscape = function() {
$('html').addClass('landscape').removeClass('portrait');
displayModeLandscape = true;
};
var currentOrientation = function() {
width = screen.availWidth || $(window).width();
height = screen.availHeight || $(window).height();
if(height > width) {
setPortrait();
} else {
setLandscape();
}
};
$(window).on(‘orientationchange’, currentOrientation);
currentOrientation();
Расширьте reset.css
К стандартному reset.css будет полезно добавить стиль переопределяющий выделение елементов при тапах. Это выглядит не кравсиво и не нейтив*:not(html)
{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
Используйте графическое ускорение.
Для оптимизации анимаций в вашем приложении вам пригодятся свойства, которые поддержнивают графическое ускорение. К ним относятся: transform, opacity. Обратите внимание на css свойство transform и постарайтесь использовать его как альтернативу left, top, right в случае, если вы собираетесь делать transition этих свойств. Transform работает гораздо быстрее.Используйте тапы, а не клики.
Я уже писал о задержке в 300мс при обработке кликов в мобильных браузерах. Поэтому используйте эвенты тачей и тапов для обработки нажатий на элементы. Про жесты больше в соответствующей статьеКак видно из примера разница между обработкой тач-евентов и клик-евнтов на десктопе составляет ~100 мс и ~400 на мобильных браузерах
LocalStorage и Caching
Используйте LocalStorage для кеширования информации пользователя, а также для хранения инфорации на устройстве. LocalStorage – persistant хранилище и остается при обновлении приложения. Но не забывайте о ограничениях, например, максимальный размер на iOs – 5MB или о том, что версия webkit на Android < 3.2 выбрасывает исключение при JSON.parse(null), все остальные бразуеры возвращают null.Используйте подходящий инструментарий.
Используйте подходящий браузер для тестирование приложений. Если вы разрабатываете приложение под Android или iOS используйте Chrome, под Firefox OS – Firefox, под Windows 8 – IE10.Для разработки игр и приложений с большим количеством анимации также будет полезна библиотека https://github.com/mrdoob/stats.js/ Или вы можете использовать встроенный в Chrome FPS counter. Нужно всего лишь зайти в chrome://flags/ и включить его.Так же Chrome имеет эмуляцию тапов – это бывает очень полезно в дебаге жестов.Запрещайте масштабирование
Вставив в тег head следующий тег вы запретите масштабирование и получите возможность трекать жесты.<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">