Как сделать так чтобы мобильная версия сайта вела себя максимально похоже на нативное мобильное приложение?

Question

[Astero_lol]

Раньше я адаптивную верстку делал как придаток к основной, особо не заморачивался, просто адаптировал контент для удобного восприятия с мобильного телефона. Сейчас я занимаюсь только мобильной версией сайта и хотелось бы делать ее максимально хорошей. Хотелось бы узнать, как добиться такого скролла (при скролле в сторону) как мобильном приложении. Как пример в мобильной версии яндекса, в разделе новости есть карусель с рубриками, она скролится в сторону в зависимости от того с какой силой свайп был. Или в мобильной версии ВК в меню тоже подобный скролл, а у меня в аналогичном меню скролится основной сайт а не меню которое находится как бы "над ним", из за этого приходится при открытии меню добавлять body: { overflow: hidden } но при этом скролл в меню становится "жестким" - то есть не продолжает скролится по инерции после свайпа. Может кто решал подобные проблемы, был бы очень признателен если бы вы поделились опытом. Заранее спасибо :)

Comments

[Сергей Тилион]

Я бы на вашем месте не заморачивался. У людей есть представление о мобильных версиях сайтов, к которым они привыкли и они предпочтут приложение если оно есть для сайта. Делать что-то среднее — не рыба, ни мясо.

Answer 1

[xmoonlight]

Хотелось бы узнать, как добиться такого скролла (при скролле в сторону) как мобильном приложении. Как пример в мобильной версии яндекса, в разделе новости есть карусель с рубриками, она скролится в сторону в зависимости от того с какой силой свайп был.

Попробую угадать)))
1. Координата тапа FROM (x1,y1)
2. Время первого изменения координат при тапе (начало действия swipe) (T1)
3. Координата отпускания TO (x2,y2)
4. Время отпускания в позиции TO (T2)
Получаем вектор перемещения и время перемещения = скорость.

И "ложка дёгтя": у стандартных браузеров в WebView очень медленная обработка событий JS :(
Единственное, что могу посоветовать:
1. тегами "гасить" (отключить слушатели событий) ВСЕ ненужные Вам события в web-приложении (чтобы повысить производительность)
2. максимально корректно писать код на "чистом" JS с триггерами слушателей обрабатываемых событий.

Пока что: чем больше производительность смарта - тем лучше отзывчивость UI web-приложения (и его работа в целом).
Постепенно производители от этого избавляются, но ОЧЕНЬ! медленно.

Начинайте отсюда!

UPD: хорошая статейка по HTML5 функциям для мобильного приложения
UPD2: Для установки ярлыка и свойств для запуска Web-приложения на Android: здесь
UPD3: Вот описание манифест-файла для web-app с Mozilla - здесь.

Comments

[Astero_lol]

Спасибо)

[xmoonlight]

Astero_lol: Если ответ помог - можно отметить решением и задонатить.

Answer 2

[dom1n1k]

Практически никак. То есть какие-то отдельные проблемы решить можно (запретить зум мета-тегом, запретить все лишние скроллы), но в целом все равно ощущения цельного, нативного приложения не будет. Обязательно будет что-то съезжать, ворох анимаций будет тормозить... Будет суррогат ни рыба ни мясо.

Вадим Макеев рассказывал, что на новых Андроидах есть возможность открывать сайты в полноэкранном режиме, без браузерной шапки. Но это вроде бы только в том случае, если пользователь предварительно установил себе ярлык на рабочий стол. При первом заходе (вроде бы) никак. Но сам лично пока не пробовал, могу ошибаться.

Comments

[xmoonlight]

открывать в полноэкранном можно только или в FullScreen-mode или после установки манифеста: https://googlechrome.github.io/samples/web-applica... (Web Application Manifest Sample)

[dom1n1k]

xmoonlight: про манифест то понятно - но получается что всё равно ведь пользователь должен сначала добавить ярлык себе на домашний экран? Манифест лишь говорит системе что делать, а решение принимает польователь.

[xmoonlight]

dom1n1k: Если мы говорим про установку через manifest, то вначале юзер принимает решение, затем из манифеста прописываются настройки ярлыка для запуска приложения.
Если про full-screen, то установка через манифест не нужна и приложение и так сможет работать на полном экране после получения разрешения от пользователя на переход в полноэкранный режим через диалог подтверждения от браузера.

Answer 3

[Alexandr Kazakov]

Посмотрите в эту сторону. Там в ответе есть 3 примера которые могут подойти.
On touch и подобные обработчики на javascript и jquery — как реализовывается проведение пальцем по экрану слева направо?