Como você lida com o zoom do navegador do cliente?

Eu tenho muitas imagens em uma página, uma galeria. Quero que as imagens permaneçam nítidas, para não fazer escala no navegador, uso as dimensões originais da imagem.

No entanto, isso funciona apenas quando o nível de zoom do navegador é 100%. Quando eu aumento ou diminuo o nível de zoom, a qualidade das imagens diminui.

Alguns clientes realmente têm níveis de zoom diferentes por padrão. Fiquei me perguntando, como você pode lidar com isso e nós lidamos com isso?

Felicidades

Acho que a maioria das outras respostas errou o ponto: não se trata de substituir as preferências do usuário, trata-se de fornecer imagens de melhor qualidade no cenário comum de um dispositivo de usuário atribuir mais de um pixel físico para cada pixel CSS, conhecido como " pixel de referência " "na sua imagem, resultando em um aumento na escala da imagem do navegador, tornando-o pixelizado e granulado.

Minhas soluções sugeridas abaixo, mas primeiro, aqui estão as quatro maneiras pelas quais isso pode acontecer:

• Mais raro: o usuário escolhe aumentar o zoom . Não é um problema tão grande, pois é a escolha deles.
• Surpreendentemente comum: o navegador do usuário é ampliado por padrão . Por exemplo, muitas máquinas Windows de alta densidade de pixels são ampliadas para 125% ou mais por padrão, e o Firefox recentemente (de forma confusa!) Fez isso nesses casos, informa aos usuários que elas são ampliadas para 100% quando na verdade são ampliadas para 125% , deixando-os coçando a cabeça se perguntando por que tudo de repente parece granulado.
• Muito comum: a maioria dos dispositivos Android (e outros dispositivos?) Tem uma proporção de pixels maior que 1. Isso significa que todo "pixel CSS" é realmente exibido usando mais de um pixel físico - portanto, uma imagem de 200 x 200 pixels configurada para width: 200px; height: 200px;realmente ser dimensionada essa imagem de 200 por 200 pixels em mais de 200 x 200 pixels, potencialmente granulada.
• Muito comum: muitos dispositivos modernos da Apple têm " telas de retina ". É basicamente o mesmo que um dispositivo Android com uma proporção de pixels de 2, mas com melhor marketing e algumas propriedades personalizadas que permitem que ele seja detectado pelo nome.

Qualquer uma delas resultará no problema de John de uma galeria de imagens com uma aparência surpreendentemente granulada.

Eu esperava que alguém tivesse uma ótima solução para esse problema, mas, por enquanto, aqui estão minhas opções preferidas, começando pela mais eficaz, mas menos universalmente possível:

1. Se possível, acesse vector - SVG (ou Raphael.js, se você ainda precisar oferecer suporte ao IE8). Realisticamente, essa é apenas uma opção para ícones, diagramas etc., e nunca é uma opção para fotografias. SVG muito complexo também pode ser desajeitado em celulares de baixo custo, devido ao processamento necessário.
2. Se possível, detecte a proporção de pixels do dispositivo e publique imagens com base nisso. Isso também pode resolver o problema do Firefox no Windows, porque o Firefox no Windows altera sua leitura das proporções de pixels quando aumenta e diminui o zoom. A desvantagem é que isso se torna um problema complicado de codificação que envolve trabalho de desenvolvimento no servidor e no cliente.

3. Se 1. e 2. não forem possíveis, mas é realmente importante e a qualidade da imagem é mais importante do que, digamos, o tempo de carregamento, apenas o dobro da imagem.

   • Isso é o que o Google faz com o logotipo em sua página inicial: eles comprimem uma imagem PNG de 538px x 190px em um contêiner de 269px x 95px. Também é mais ou menos o mesmo que as imagens responsivas funcionam.

   • Isso costumava ser considerado uma prática ruim porque as versões antigas do IE eram péssimas para reduzir as imagens, mas agora elas são muito raramente usadas e muito menos comuns que as telas de alta densidade de pixels. Ainda é um tanto indesejável, pois aumenta o tamanho da imagem e, portanto, aumenta o tempo de carregamento - é uma troca que você precisa julgar caso a caso.

   • O tamanho da duplicação é comum porque muito poucos dispositivos têm uma proporção maior que 2, poucos usuários são ampliados em mais de 200% e as imagens em escala de 50% são mais limpas do que outras quantidades.
4. Se 1, 2 não for possível e o tempo de carregamento for uma prioridade muito alta para 3, não conheço outras opções e minha recomendação é não se preocupar com isso, porque metade dos sites da Internet tem o mesmo problema , e as pessoas com esse problema no seu site também terão esse problema em outros sites. Inferno, o Firefox no Windows até pixeliza seus próprios botões de interface do usuário ...

Como comentou o DA01, você não deve fazer nada a respeito.

O zoom é uma opção especificada pelo usuário e, portanto, está sob seu controle. As configurações que eles decidem mexer não devem ser de sua responsabilidade.

Você pode contabilizar diferentes navegadores e versões e o que não, mas razoavelmente falando, você não deve considerar o zoom de um usuário.

Claro que você pode responder por 125% ou 150% (e talvez nem precise). Mas 200%, 300%, mais? Isso simplesmente não faz sentido.

E se o usuário usar o tema do Windows de alto contraste? E se eles estiverem constantemente usando a lupa? Quem se importa?

Idealmente, seu site é flexível o suficiente para não diferir muito entre pequenas diferenças de zoom, mas as imagens diminuirão em qualidade com o zoom, mas isso não é de sua responsabilidade.

Obviamente, essa é apenas a minha opinião, mas a empresa em que trabalho também diz explicitamente aos clientes que não suportamos suas preferências de zoom.

Outras pessoas deram ótimas dicas sobre os problemas que você enfrentará e eu não sou bom o suficiente nessa área para fazer um bom tutorial, mas ...

Convém criar um site responsivo que se ajuste de acordo com o dispositivo / res do usuário e, provavelmente, você está procurando um código que altere as imagens para arquivos de res mais altos ou mais baixos quando solicitado, em vez de esticar e apertar as imagens que você possui.

Quando tentei fazer isso pela última vez, usei media-query.js e picturefill.js. Consulte: http://responsivedesign.is/resources/images/picture-fill . Eu tinha um layout de 3 colunas, onde algumas imagens abrangeriam duas colunas ... Quando a janela do navegador era pequena o suficiente, as imagens grandes passavam para uma versão res menor, com apenas uma coluna de largura. O navegador do usuário apenas carregava a versão do arquivo necessária. (e no meu caso, o plugin de alvenaria moveria tudo para acomodar).

Obviamente, seu usuário precisa ter o javascript ativado ...

Você não pode forçar a mão do usuário. As configurações do usuário não são suas para brincar. Configurações e contorná-las é uma má ideia, pode haver uma razão pela qual o usuário fez alguma coisa. Em ambos os casos, você não pode garantir nada nos vários dispositivos.

De fato, se você entrar no lado técnico, isso se torna ainda mais interessante. Você realmente dá as chaves do reino com sua página da web. Veja se o usuário baixa a página da Web e agora pode fazer o que quiser com ela. Você não tem controle sobre essa camada, afinal ela está sendo executada na máquina dos usuários e eles podem fazer o que quiserem. Mesmo o stackexhange não tem a mesma aparência no meu computador / celular e no seu. Altero alguns aspectos da GUI automaticamente, para corrigir 2 erros de renderização e adicionei 2 atalhos.

O comportamento irritante de aumentar a escala de imagens nas telas HiDPI, o que leva a fotos borradas (também conhecido como pesadelo dos fotógrafos), também me incomoda há algum tempo. Também me perguntei que não há um atributo CSS simples para desativar isso nas imagens.

Minha solução atual com CSS é assim:

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

O próximo passo seria usar classes para definir e definir diferentes tamanhos de imagem, se necessário. Não sei como obter dinamicamente os tamanhos das imagens. A função CSS attr () parece não funcionar para isso.

Portanto, isso seria mais uma questão de programação. Porém, usando JQuery, ou mesmo apenas CSS plano, é possível exibir imagens diferentes com base na largura da tela do usuário, altura da tela e assim por diante.

Novamente, embora isso provavelmente não seja a troca de pilha a ser perguntada.

Você pode simplesmente fazer isso via HTML no cabeçalho do site e adicionar este

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Isso não é recomendado pelos desenvolvedores para todo tipo de site, mas deve realizar o que você está pedindo.

Espero que ajude: css rule transform: scale on body tag or other - não é perfeito, veja aqui, por favor:

/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741