Fullscreen e resize Flashcards
Como definir dinamicamente a largura e altura do canvas para ocupar a tela?
Usando window.innerWidth e window.innerHeight.
Qual estilo CSS fixa o canvas no canto superior esquerdo da tela?
.webgl { position: fixed; top: 0; left: 0; }
Como remover margens e padding de todos os elementos na página?
Usando * { margin: 0; padding: 0; } no CSS.
Como remover a rolagem da página mesmo em dispositivos móveis?
Adicionando overflow: hidden no html e no body.
Como evitar a borda azul que aparece no canvas ao clicar ou arrastar?
Usando outline: none; no seletor .webgl.
Qual evento detecta quando o tamanho da janela é alterado?
window.addEventListener(‘resize’, callback)
O que precisa ser atualizado quando a janela é redimensionada?
Tamanhos, proporção da câmera, matriz de projeção e tamanho do renderer.
O que a função camera.updateProjectionMatrix() faz?
Atualiza a matriz de projeção da câmera após mudanças na proporção da tela.
Como garantir que o renderer use um pixel ratio adequado sem comprometer desempenho?
Usar renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
Como alternar entre modo fullscreen e modo normal com duplo clique?
Usando canvas.requestFullscreen() e document.exitFullscreen() em um listener de ‘dblclick’.
O que deve ser feito para que o fullscreen funcione também no Safari?
Usar canvas.webkitRequestFullscreen() e document.webkitExitFullscreen() como fallback.
Por que limitar o pixel ratio em 2 pode ser útil?
Para manter alta qualidade visual sem comprometer performance em telas 4K.
