Reactjs - Скрыть адресную строку в мобильных браузерах (Chrome / Safari)

Question

Я создаю интернет-магазин с Reactjs.Моя цель - предотвратить вертикальную прокрутку и перемещаться только с горизонтальным ползунком.Все работает нормально, здесь вы можете увидеть результат:

Высота всех компонентов динамически изменяется в зависимости от высоты области просмотра, для которой я прислушиваюсь к изменениям.Подводя итог: страница всегда точно на 100%.

Мой вопрос:

Как удалить адресную строку в мобильном браузере?Я перепробовал почти все.

    window.scrollTo(0,1);
    window.scrollIntoView(behavior: "smooth");

не работал, даже когда я увеличил высоту своего сайта до 110%. Я вижу прокрутку своей страницы, но содержимое прокручивается прямо под адресной строкой браузера. Я использовал refs и id для прокрутки определенных компонентов в представление, тоже не сработало ... ОбтеканиеФункция scrollTo в TimeOut не имеет никакого эффекта.Адресная строка остается неизменной в верхней части моей страницы ... Я также не хочу добавлять страницу на домашний экран и работать с метатегами в моем манифесте.

Есть предложения?Спасибо.

Answer 1

Хорошо, я думаю, это сложно.Я думаю, что метатеги (например, "display": "standalone", и т. Д.) В файле манифеста и добавление на домашний экран будут для вас лучшими вариантами.

Однако, если вы решили об этом и нуждаетесь в другом решении, мое предложениеэто посмотреть на полноэкранный API.Вы должны знать, что iOS Safari не имеет полноэкранного API.Так что для мобильных устройств Apple я считаю, что ваш единственный вариант - это манифест / добавить на домашний экран.

Google предоставил здесь дополнительную информацию об этом: https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

Удачи!