14

print informacoes de iphone 8

Gostaria de saber por que um @media(max-width: 400px) é aplicado em um celular que tem 1440px/2960px? Como isso realmente funciona ?

Eu encontrei um site com essa informação, que o celular tem 1440x2960 porém a resolução CSS é de 360x740. Eu pedi para um amigo que tem Iphone 8 testar e o max-width: 400px foi aplicado. Qual a diferença entre os dois? O navegador que faz essa distinção ?

2 Respostas 2

8

O que acontece é que a densidade de pixel não está ligada a largura da tela. Veja essa imagem, repare que eu uma polegada você tem quantidade de pixels diferentes. Em uma tela de alta densidade você pode ter até 3x mais pixels no mesmo espaço.

inserir a descrição da imagem aqui

As unidades atuais de resolução para fazer os media queries segundo a documentação W3C são:

  • dpi:     pontos por polegada.
  • dpcm: pontos por centímetro.
  • dppx:  pontos por pixel.

Veja que 1px não é mais 1px :/

Note that due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi. This corresponds to the default resolution of images displayed in CSS

O que o texto acima quer dizer é que 1px CSS é equivalente a 96 pontos por polegada.

A regra @media a seguir usa Media Queries para atribuir algumas regras de estilo especiais a dispositivos que usam 2 ou mais pixels de dispositivo por unidade de px de CSS:

@media (min-resolution: 2dppx) { ... } /* regra css para telas com 2x a densidade de pixel, 96 x 2 = 192dpi */

Fonte: https://www.w3.org/TR/css3-values/#resolution

Resumo: Então o que você precisa ter em mente é que 400px CSS é diferente de 400px da tela do dispositivo. É meio confuso no início, mas caso você queira uma regra diferente para dispositivos de alta densidade use as medidas citadas acima dpi dpcm dppx e não em PX.

E repare que em um monitor comum 1px = 96dpi, e em um monitor moderno do tipo Retina 1px = 192dpi (2 x 96) ou mais, porém continua sendo 1px, por isso a regra @media de ser em 2dppx por exemplo ou algo do tipo.

Dica: Nesse artigo tem exemplo de como agrupar regras @media para telas comum ou de alta densidade: https://css-tricks.com/snippets/css/retina-display-media-query/

Essa é uma table simples com algumas medidas de tela, repare na diferença de Pixel Density vs. Display Resolution

inserir a descrição da imagem aqui

Fonte da imagem onde também existe uma Pixel density calculator http://kingscalculator.com/en/other-calculators/pixel-density-calculator

Artigo que pode te ajudar a entender melhor esse conceito: https://juiceboxinteractive.com/blog/a-pixel-is-not-a-pixel-designing-for-a-new-generation-of-mobile-devices/


OBS: Ao que me parece a propriedade -webkit-min-device-pixel-ratio não é padrão (non standard)! E o uso dela não é recomendado! Opte pelas unidades citadas acima dpi dpcm dppx

While the standard uses min/max-resolution for this, some browsers support the older non-standard device-pixel-ratio media query

Fonte: https://caniuse.com/#feat=css-media-resolution

2
  • Realmente é meio confuso, mas deu para entender basicamente como funciona, obrigado por mandar o link do site para calcular, irei dar uma estudada melhor, isso vai me ajudar muito nos sites responsivos. Obrigado pela ajuda.
    – John Covv
    Commented 5/02/2019 às 12:41
  • 1
    @JohnCovv sem problema, o chato é ficar fazendo tantos @media, mas vc pode condensa-los em um só, veja aqui alguns exemplos css-tricks.com/snippets/css/retina-display-media-query e sobre a resposta pense que vc pode ter 1PX = 96dpi, e um 1PX que é = 144dpi, isso vai depender da densidade de pixel da tela do dispositivo.
    – hugocsl
    Commented 5/02/2019 às 12:44
4

Isso é referente à qualidade da imagem ou da web no seu celular,

no S8 o ration é de 4 hardware pixel por CSS pixel, 360x740 * 4 = 1440x2960

no CSS ficaria assim:

@media (-webkit-min-device-pixel-ratio: 4) {}

em poucas palavras vai exibir em 360x740 mas com uma qualidade 4x superior.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .