Bom dia amigos
Apresento a você a tradução de uma breve nota, "Como obter os tamanhos de tela, janela e página da Web em JavaScript", de Dmitri Pavlutin.
Para determinar a orientação da janela do navegador (paisagem ou retrato), você pode comparar sua largura e altura.
No entanto, é fácil ficar confuso em todos os tipos de tamanhos disponíveis: existem tamanhos de tela, tamanhos de janelas, páginas da web etc.
O que significam esses tamanhos e, mais importante, como obtê-los? É disso que eu vou falar.
1. Tela
1.1 Tamanho da tela
O tamanho da tela é a largura e a altura da tela inteira: monitor ou monitor móvel.
Você pode obter informações sobre o tamanho da tela usando a
screenpropriedade do objeto window:
const screenWidth = window.screen.width
const screenHeight = window.screen.height
1.2 Tamanho de tela disponível
O tamanho da tela disponível é a largura e a altura da tela ativa sem a barra de ferramentas do sistema operacional.
Para obter o tamanho da tela disponível, consulte novamente
window.screen:
const availableScreenWidth = window.screen.availWidth
const availableScreenHeight = window.screen.availHeight
2. Janela
2.1 Tamanho da janela externa (ou tamanho da janela externa)
O tamanho da janela externa é a largura e a altura da janela atual do navegador, incluindo a barra de endereço, barra de guias e outras barras do navegador.
Você pode obter informações sobre o tamanho da janela externa usando propriedades
outerWidthe um outerHeightobjeto window:
const windowOuterWidth = window.outerWidth
const windowOuterHeight = window.outerHeight
2.2 Tamanho da janela interna (ou tamanho da janela interna)
O tamanho interno da janela é a largura e a altura da janela de exibição (janela de visualização).
O objeto
windowfornece propriedades innerWidthe innerHeight:
const windowInnerWidth = window.innerWidth
const windowInnerHeight = window.innerHeight
Se queremos obter o tamanho interno da janela sem barras de rolagem, fazemos o seguinte:
const windowInnerWidth = document.documentElement.clientWidth
const windowInnerHeight = document.documentElement.clientHeight
3. tamanho da página da web
O tamanho da página da web é a largura e a altura do conteúdo exibido (conteúdo renderizado).
Use o seguinte para obter o tamanho da página da web (inclui preenchimento de página, mas exclui bordas, preenchimento e barras de rolagem):
const pageWidth = document.documentElement.scrollWidth
const pageHeight = document.documentElement.scrollHeight
Se for
pageHeightmaior que a altura interna da janela, uma barra de rolagem vertical estará presente.
4. Conclusão
Espero que agora você entenda como obter tamanhos diferentes.
Tamanho da tela é o tamanho do monitor (ou monitor) e o tamanho da tela disponível é o tamanho da tela sem as barras de ferramentas do SO.
O tamanho da janela externa é o tamanho da janela ativa do navegador (incluindo a barra de pesquisa, barra de guias, barras laterais abertas etc.), e o tamanho da janela interna é o tamanho da janela de visualização.
Finalmente, o tamanho da página da web é o tamanho do conteúdo.
Obrigado pela atenção, amigos!