Como obter o tamanho da tela, janela do navegador e da própria página web em JavaScript?
Olá a todos! Sou iniciante em JavaScript e estou fazendo um site responsivo. Preciso que alguns elementos se ajustem ao tamanho do dispositivo do usuário. Mas estou confuso com os termos: o que são screen, window e document? E como obter seus tamanhos exatos?
Por exemplo, escrevi este código:
```javascript
console.log('screen width:', screen.width);
console.log('window inner width:', window.innerWidth);
console.log('document width:', document.width);
```
Mas `document.width` retorna `undefined`, e `screen.width` parece mostrar algo que não espero. Meu notebook tem tela Full HD (1920×1080), mas `screen.width` retorna 1536, e `window.innerWidth` retorna 1519 (com a janela maximizada). Por que isso acontece? E como obter corretamente a largura e altura da própria página web (incluindo rolagem)?
Quero entender a diferença entre esses três conceitos e saber quais propriedades usar em diferentes situações. Agradeço por uma explicação detalhada com exemplos que funcionem em todos os navegadores (Chrome, Firefox, Safari).