Задать вопрос
640
@640
Beginner

Как правильно адапттировать single page application под маленькие экраны?

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

Держать в стейте Redux'a размеры экрана пользователя, и исходя из них рендерить различные компоненты? В таком случае, если пользователь начнёт изменять размеры браузера, то как обновлять данные?

Какое есть оптимальное решение?

UPD: сделал с помощью react-sizeme
  • Вопрос задан
  • 110 просмотров
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 2
rockon404
@rockon404 Куратор тега React
Frontend Developer
Можно использовать react-responsive или что-то наподобие.
Ответ написан
Комментировать
@rPman
Подумайте хорошенько, изучите гайдлайны гугла и эпл по UI на мобильных устройствах с маленьким экраном. интерфейс декстопного приложения и мобильного сильно отличается, иначе этим пльзоваться будет дико неудобно.

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

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽