Как правильно адапттировать single page application под маленькие экраны?
Суть в том, что если ширина экрана меньше определенного порога, добавляются новые кнопки. Потому что на большом экране (предполагается использование персонального компьютера), есть правый и левый клик мыши. А на маленьких экранах (предполагается использование смартфона), надо сделать кнопки + и - , которые заменят нажатие правой и левой кнопок мыши.
Держать в стейте Redux'a размеры экрана пользователя, и исходя из них рендерить различные компоненты? В таком случае, если пользователь начнёт изменять размеры браузера, то как обновлять данные?
Подумайте хорошенько, изучите гайдлайны гугла и эпл по UI на мобильных устройствах с маленьким экраном. интерфейс декстопного приложения и мобильного сильно отличается, иначе этим пльзоваться будет дико неудобно.
На телефонах вместо двух кнопок +- нормой - скроллинг свайпом по экрану. Вообще жесты пальцем - отличное направление мобильных интерфейсов, у вас может получиться даже меньше кнопок, ну и конечно же расширение всего экрана свайпом влево вправо (аналог закладок или как дополнительная постраничная навигация). И еще, правый клик мыши на пальцеориентированном интерфейсе - это долгое нажатие (обычно используется для контекстного меню)
Простой
