Как запретить отображение черных полос на Android при переходе в полноэкранный режим в React? ⇐ Html

[Anonymous]

Я столкнулся со странной проблемой при попытке перевести свой веб-сайт в полноэкранный режим: вверху и внизу экрана появляются черные полосы.
Белый экран с черными полосами внизу и вверху экрана и текстом «Перейти в полноэкранный режим».
Что я пробовал

• Использование viewport-fit=cover.
• Настройка веб-сайта как PWA.
• Использована вставка безопасной области.
• Обратился за помощью к AI/Github Copilot, но безрезультатно. Тем не менее, Copilot создал пример, в котором содержимое тела было установлено на черный цвет, а затем я заметил, что нижняя панель на самом деле имеет сероватый цвет, вероятно, из Chrome. Так что это может быть проблема с браузером.
• Изменение режима навигации для полноэкранных параметров, в результате чего верхняя черная полоса удалена, но не нижняя.
• Изменение настроек на телефоне для использования навигации с помощью жестов. Это решило проблему, но это неприемлемо.
• Изменение настроек на телефоне для отображения выреза камеры.
  Экран настроек показывает активную настройку «Показать вырез камеры» для Chrome.

Код
Мой фактический код больше, но вкратце можно привести следующий пример. Для воспроизведения создайте новый проект Vite с помощью React + TypeScript (

Код: Выделить всё

pnpm create vite@latest ./

, «React», «TypeScript»)
App.tsx

Код: Выделить всё

export const App = () => {
return (

 {document.documentElement.requestFullscreen({ navigationUI: "hide" })}}>Go Fullscreen

)
}

main.tsx

Код: Выделить всё

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { App } from './App.tsx'

createRoot(document.getElementById('root')!).render(


,
)

index.html

Код: Выделить всё

[*]

Vite + React + TS

Техническая информация

• Телефон: Samsung Galaxy S24
• Версия Android: Android 16 (OneUI 8)
• Версия Chrome: 141.0.7390.122

Самое смешное то есть, раньше такого не было. До того, как я обновился до OneUI8/Android 16, я использовал OneUI7/Android15, и это не было проблемой, мне просто нужно было использовать viewport-fit=cover и установить NavigationUI для скрытия.

Подробнее здесь: https://stackoverflow.com/questions/797 ... n-in-react