Estou tentando criar um elemento de tela que ocupa 100% da largura e altura da janela de exibição.
Você pode ver no meu exemplo aqui que está ocorrendo, mas está adicionando barras de rolagem no Chrome e no FireFox. Como impedir as barras de rolagem extras e fornecer exatamente a largura e a altura da janela para o tamanho da tela?
Respostas:
Para manter a largura e a altura da tela cheia da tela sempre, ou seja, mesmo quando o navegador é redimensionado, você precisa executar seu loop de desenho em uma função que redimensione a tela para window.innerHeight e window.innerWidth.
Exemplo: http://jsfiddle.net/jaredwilli/qFuDr/
HTML
Javascript
CSS
É assim que você cria corretamente a largura e a altura totais da tela do navegador. Você só precisa colocar todo o código para desenhar na tela na função drawStuff ().
fonte
debounce
redimensionar, caso contrário, você inundará o navegador.display: block
: Isso não apenas remove as barras de rolagem, mas remove 2px da altura do corpo do documento, que normalmente são adicionados sob as linhas de texto dentro de um bloco. Então, +1 para issoVocê pode tentar unidades de viewport (CSS3):
fonte
display: block;
e ele faz o trabalho.Responderei à pergunta mais geral de como adaptar uma tela dinamicamente ao tamanho após redimensionar a janela. A resposta aceita lida adequadamente com o caso em que largura e altura devem ser 100%, o que foi solicitado, mas também alterará a proporção da tela. Muitos usuários desejam que a tela seja redimensionada no redimensionamento da janela, mas mantendo a proporção intacta. Não é a pergunta exata, mas ela "se encaixa", apenas colocando a questão em um contexto um pouco mais geral.
A janela terá alguma proporção (largura / altura), e o objeto da tela também. Como você deseja que essas duas proporções se relacionem entre si é uma coisa que você precisa esclarecer, não há uma resposta única para essa pergunta - analisarei alguns casos comuns do que você pode quer.
O mais importante é esclarecer: o objeto de tela html possui um atributo de largura e um atributo de altura; e, em seguida, o css do mesmo objeto também possui um atributo de largura e altura. Essas duas larguras e alturas são diferentes, ambas são úteis para coisas diferentes.
Alterar os atributos de largura e altura é um método com o qual você sempre pode alterar o tamanho da sua tela, mas terá que repintar tudo, o que levará tempo e nem sempre será necessário, porque é possível realizar algumas alterações no tamanho. por meio dos atributos css; nesse caso, você não redesenha a tela.
Eu vejo quatro casos do que você pode querer que ocorra no redimensionamento da janela (todos começando com uma tela cheia)
1: você deseja que a largura permaneça 100% e deseja que a proporção fique como estava. Nesse caso, você não precisa redesenhar a tela; você nem precisa de um manipulador de redimensionamento de janela. Tudo o que você precisa é
onde ctx é o seu contexto de tela. fiddle: resizeByWidth
2: você deseja que a largura e a altura permaneçam 100% e a alteração resultante na proporção tenha o efeito de uma imagem esticada. Agora, você ainda não precisa redesenhar a tela, mas precisa de um manipulador de redimensionamento de janela. No manipulador, você faz
fiddle: messWithAspectratio
3: você deseja que a largura e a altura permaneçam 100%, mas a resposta para a mudança na proporção é algo diferente de esticar a imagem. Em seguida, é necessário redesenhar e fazê-lo da maneira descrita na resposta aceita.
violino: redesenhar
4: você deseja que a largura e a altura sejam 100% no carregamento da página, mas permaneça constante a partir de então (nenhuma reação ao redimensionamento da janela.
violino: fixo
Todos os violinos têm código idêntico, exceto a linha 63, onde o modo está definido. Você também pode copiar o código do violino para executar em sua máquina local; nesse caso, você pode selecionar o modo por meio de um argumento da string de consulta, como? Mode = redraw
fonte
$(ctx.canvas).css("width", "100%");
equivale a$(canvas).css("width", "100%");
(a tela do contexto é apenas a tela) #ctx.canvas
é muito menor do quecanvas.getContext('2d')
- é por isso que eu faço 2). Portanto, não há variável chamada canvas, mas há ctx.canvas. É daí que o ctx.canvas vem.http://jsfiddle.net/mqFdk/10/
com CSS
fonte
Eu também estava procurando encontrar a resposta para essa pergunta, mas a resposta aceita estava sendo quebrada para mim. Aparentemente, usar window.innerWidth não é portátil. Funciona em alguns navegadores, mas notei que o Firefox não gostou.
Gregg Tavares postou um ótimo recurso aqui que aborda esse problema diretamente: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (Veja os itens 3 e 4 do antipadrão).
Usar canvas.clientWidth em vez de window.innerWidth parece funcionar bem.
Aqui está o loop de renderização sugerido por Gregg:
fonte
(Expandindo com a resposta de 動靜 能量)
Estilize a tela para preencher o corpo. Ao renderizar na tela, leve em consideração seu tamanho.
http://jsfiddle.net/mqFdk/356/
CSS:
Javascript:
fonte
Para celulares, é melhor usá-lo
porque ela será exibida incorretamente após alterar a orientação. A "janela de visualização" aumentará ao mudar a orientação para retrato.Veja o exemplo completo
fonte