Что не так с мобильным вебом

09.12.17
RNDJS4
https://vk.com/rndjs

Transcript

1. Что не так с мобильным вебом? illustration by Alleaume Jeremy Денис Ильин Songsterr
3. Баги браузеров Баги мобильного веба То что не исправить Нативный веб?
4. Статистика мобильного веба за 2017 /netmarketshare.com Safari 28 % Chrome 58 % Chrome Safari UC Browser Opera Mini Android Browser Остальные
5. Баги Браузеров
6. Особенности Chrome
7. /video
8. Pull-to-refresh • touch-action: none • overflow-y: hidden • e.preventDefault() все тачи верхней части экрана • via chrome://flags (disable-pull-to-refresh-effect) https://goo.gl/oX2K5a
9. Overflow glowing • position: absolute div блок • e.preventDefault() все тачи верхней части экрана
10. Особенности Safari
11. /video
12. Swipe back/forward window.history.replaceState(null, null, "#" + url) /video
13. /video
14. Controls • «Мертвая зона» в 44px. Хочешь контролы снизу, размещай не ниже этого значения. • Сделай панель видимой всегда! • Хак: удвой кастомную панель до 88px, по проведенным исследованиям пользователь кликает в центр/верхнюю границу кнопки. /video
15. Варианты решения Tjournal Songsterr concept
16. Остальной мир
17. Show/hide url bar
18. Не нужно ломать поведение браузера. Только если очень хочется.
19. /video
20. Keyboard disappear document.activeElement.blur() ✅ /video
21. Button/input highlight • :hover, :focus, :active, outline • tap-highlight-color: transparent а кақ же A11Y?
22. Баги Мобильного Веба
23. Анимации
24. Как сделать гладкие анимации? • translate: transform() • will-change • What forces layout/reflow и csstriggers.com • requestAnimationFrame() • анимации на js, а не css (прерываемые) • частный случай Web Animations Api
25. https://dassur.ma/things/120fps/#angle-2-the-main-thread-is-the-ui-thread
26. position: fixed
27. www /video
28. /video
29. /video
30. /video
31. Пути решения overflow: hidden на html и body ✅
32. Пути решения Слушаем touchmove, если касание происходит вне position:fixed блока, то e.preventDefault().
33. Пути решения • (scrollTop === 0) iOS думает, что скроллим body. touchstart + touchmove проверяем направление скролла, ставим e.preventDefault(). • Форсированно ставим scrollTop = 1, получаем резиновую ленту на iOS ✅
34. Перестрахуемся! Ставим ::before / after псевдоэлементы
35. overscroll-behaviour
36. Спасибо Константину Земцовскому, команда ВКонтакте http://sidebar.imkost.com
37. /video
38. Sidebar navigation https://googlechromelabs.github.io/ui-element-samples/side-nav
39. CSS: portrait/landscape
40. @media screen and (orientation: landscape) and (min-aspect-ratio: 13/9) ✅
41. Есть 2 способа исправить ошибку: • написать хак • изменить дизайн
42. То что не Исправить!
43. Существуют решения вроде NoSleep.js, но стабильной работы нет Display sleep
44. /video
45. Infinity Scroller https://developers.google.com/web/updates/2016/07/infinite-scroller /video
46. /video
47. Схлопывание поиска iOS ❌ /video
48. «Что мертво, умереть не может»
49. Нативный Веб?
51. Проблемы с иконками и названиями Twitter Twitter Lite YouTube YouTube
52. Standalone mode
53. Без Service Worker на iOS грустно
54. Веб приложения не хранят стэйт /video
55. Нативный мобильный веб определенно сохранит больше места на телефоне
56. Какое приложение выбрать мобильное или нативное?
57. Лучше один раз попробовать, чем сто раз услышать
58. Вопросы? @followdarko @followdarko /dgizmo