Я ищу, чтобы создать веб-страницу, которая точно соответствует размеру порта просмотра, когда окно браузера развернуто.Чтобы добиться этого, я хочу создать контейнерный div для всего приложения с фиксированной шириной / высотой, равной размеру максимизированного окна просмотра порта.Если бы все пользователи открывали эту веб-страницу с развернутыми окнами (и увеличением 100%), это было бы довольно просто, используя
document.documentElement.clientWidth
document.documentElement.clientHeight
или просто установив правило css:
#container{
width: 100% //or 100vw;
height: 100% ///or 100vh;
Но они дают только размеры текущего порта просмотра.Таким образом, получение развернутого порта просмотра требует небольшого обходного пути.
Получение ширины выполнимо путем вычитания ширины полосы прокрутки из доступной ширины экрана:
getContainerWidth(){
let verticalScrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
let containerWidth = screen.availWidth - verticalScrollBarWidth;
return containerWidth}
Получение высоты немного сложнее, потому чтонам нужно учитывать пользовательский интерфейс браузера (вкладки / адресная строка / закладки):
getContainerHeight(){
let borwserUIHeight = window.outerHeight - window.innerHeight;
let horizontalScrollBarHeight = window.innerHeight - document.documentElement.clientHeight;
let containerHeight = screen.availHeight - (borwserUIHeight + horizontalScrollBarHeight);
return containerHeight}
Пока это работает, пока ... пользователь не загрузит страницу с открытыми инструментами разработки.
Когда это происходит, ни одна из функций измерения высоты, по-видимому, не учитывает высоту инструментов разработчика.
window.innerHeight / $ (window) .outerHeight () - Высота просмотрапорт, включающий полосу прокрутки (без инструментов разработчика)
document.documentElement.clientHeight / $ (window) .height () / $ (window) .innerHeight () - высота порта просмотра невключая полосу прокрутки (не включая инструменты разработки)
window.outerHeight - высота окна браузера
document.documentElement.scrollHeight / $ (документ).онight () - Кажется, что это высота всего прокручиваемого контента, но для того, чтобы он равнялся требуемой высоте порта просмотра, нужно, чтобы весь контент на странице был готов к размеру требуемой высоты - что является проблемой дляначать с.
Можно ли получить высоту инструментов разработчика?Если нет, то подходит ли мой подход к этому, и есть ли лучшее решение, которое мне нужно - веб-страница с фиксированными размерами размером порта развернутого просмотра, которая не реагирует на изменения размера окна?
пс
Единственная ситуация, в которой контейнер должен реагировать на изменение размера окна, - это при переключении экранов, но это просто требует переоценки требуемого размера с новыми константами.