Obtendo as dimensões do navegador do cliente

Em certas situações os designers e desenvolvedores de um website necessitam sabe as dimensões do navegador do cliente em um dado momento, como por exemplo para delimitar a animação de um determinado controle às bordas da página, ou reajustar um elemento da página tendo como base a área da mesma.

Tudo isso pode ser facilitado com JavaScript rodando no navegador do cliente (o usuário que acessa a página), mas antes de mostrar como é o código, gostaria de explicar sobre as duas propriedades que são utilizadas no script,  sendo elas a clientHeigth, e a clientWidth. Essas propriedades retornam a área do navegador sem incluir as barras de rolagem ou qualquer borda que tenha sido aplicada utilizando folhas de estilos CSS.

Para isso, abra o seu editor de texto predileto e crie uma página HTML simples, aqui criarei somente para exibir uma mensagem mostrando os valores da página.

  1. <html>
  2.      <head>
  3.           <title>Obtendo as dimensões do navegador do cliente</title>
  4.     </head>
  5.     <body>
  6.         Esta página exibe as dimensões do navegador no momento em que foi carregada.
  7.         <!– Script  –>
  8.         <script language=”javascript”>
  9.             // Declaração das variáveis que irão conter as dimensões
  10.             var largura = document.body.clientWidth;
  11.             var altura = document.body.clientHeigth;
  12.             // Exibindo a caixa de mensagem
  13.             alert(“As dimensões do seu navegador são: “ + largura + ” X “ + altura);
  14.         </script>
  15.     </body>
  16. </html>

Este é o resultado final deste script:

Resultado do script
Obtendo as dimensões di navegador com javascript
Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s