Вот несколько способов получить полноразмерную область просмотра:

1. Метатег: вы можете использовать следующий метатег в разделе вашего HTML-кода, чтобы установить размер области просмотра:

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   Этот метатег гарантирует, что ширина области просмотра будет равна ширине устройства, и масштабирует страницу по размеру экрана.

2. Медиа-запросы CSS. Вы можете использовать медиа-запросы CSS для установки определенных стилей в зависимости от размера области просмотра. Используя правило @media, вы можете определить разные стили для разных устройств или размеров экрана. Например:

   @media screen and (max-width: 768px) {
   body {
   width: 100%;
   }
   }

   В этом примере для свойства widthэлемента bodyустановлено значение 100 %, когда ширина экрана составляет 768 пикселей или меньше.

3. JavaScript: вы также можете управлять размером области просмотра с помощью JavaScript. Обращаясь к свойствам window.innerWidthи window.innerHeight, вы можете динамически настраивать размеры области просмотра. Вот пример:

   window.addEventListener('resize', function() {
   document.documentElement.style.setProperty('--vh', window.innerHeight + 'px');
   });

   В этом фрагменте кода переменная CSS --vhустанавливается на текущую высоту окна при каждом изменении размера окна.