CSS for Google Pixel 3 XL resolution

Asked

Viewed 84 times

-2

What would be the media querie for the resolution of the new mobile: Google Pixel 3 XL ?

At this link i have the media queries for version 2:

@media
  only screen and (-webkit-min-device-pixel-ratio: 3),
  only screen and (   min--moz-device-pixel-ratio: 3),
  only screen and (     -o-min-device-pixel-ratio: 3/1),
  only screen and (        min-device-pixel-ratio: 3),
  only screen and (                min-resolution: 384dpi),
  only screen and (                min-resolution: 3dppx) { 
    /* Retina styles here */
}

I suspect it is so, but I have no basis to make sure:

/** Google Pixel 3 XL  **/
@media screen and (device-width: 360px) and (device-height: 740px),
only screen and (-webkit-min-device-pixel-ratio: 4),
only screen and (   min--moz-device-pixel-ratio: 4),
only screen and (     -o-min-device-pixel-ratio: 4/1),
only screen and (        min-device-pixel-ratio: 4),
only screen and (                min-resolution: 523dpi),
only screen and (                min-resolution: 4dppx) {
  /*** exemplo ***/
}
  • As I commented below, take a look here that will help you: https://answall.com/questions/360441/qual-a-diff%C3%A7a-entre-css-Resolution-e-pixel-Resolution/360460#360460

1 answer

2

What you’re looking for is

Google Pixel 3 XL

Pixel Size   1440 x 2960
Viewport     412 x 847

Source

A table to help you in the future

Google Pixel 2 XL

1440 x 2880 pixels, 18:9 ratio (~538 ppi density)

Source

Google Pixel 3 lite

Source

1080 x 2160 pixels, 18:9 ratio (~434 ppi density)

Google Pixel 3

Source

1080 x 2160 pixels, 18:9 ratio (~443 ppi density)

Google Pixel 3 XL

1440 x 2960 pixels, 18.5:9 ratio (~523 ppi density)

Source

Pixel Size - Viewport

  1440 x 2560   412 x 732
  1080 x 1920   412 x 732
> 1440 x 2960   412 x 847
  1080 x 2160   412 x 824
> 1440 x 2960   360 x 740
  1440 x 2560   480 x 853
  1080 x 1920   480 x 853
  1440 x 2560   360 x 640
  1536 x 2048   768 x 1024
  1200 x 1920   600 x 960
  800 x 1280    800 x 1280
  2560 x 1700   1280 x 850
  • And how I write that on media queries?

  • only screen and (device-width: 412px) and (device-height: 847px) 
and (-webkit-min-device-pixel-ratio: 18.5/9) 
and (min-resolution: 523dpi) ?

  • from what I know: ppi and dpi are equivalent, as far as I know, are equivalent: calculation

  • 1

    @Ivanferrer recomendo a leitura ;) https://answall.com/questions/360441/qual-a-diferen%C3%A7a-entre-css-Resolution-e-pixel-Resolution/360460#360460

Browser other questions tagged

You are not signed in. Login or sign up in order to post.