Pixel and viewport dimensions?

[NBG]

Hi,

i’ve found this page and i’m a little bit confused:

http://www.canbike.org/CSSpixels/

Okay i’m using this line of code:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

And i’m using some of these:

@media screen and (min-width:640px) { … }

But how can i optimize for the Samsung S6 for example?

Pixel Width: 2560
Pixel Height: 1440
Device Width: 640
Device Height: 360

Can i ignore the pixel widths? So max-width:640px will fit to the S6?

confused

Thanks,
NBG

[Geoff Graham]

Hey there!

Definitely want to echo @Beverleyh’s comment about targeting specific devices and the maintenance issues that come along with it.

However, I do know there are times when it makes to do so. Here are some handy snippets for targeting specific devices we recently put together:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Cheers!

[NBG]

Hi,

the Samsung S6 was just an example.

I don’t wanna optimize my page for this device, i’m just confused by the different pixel sizes (pixel width vs. device width).

So @media screen and (min-width:640px) { … } would catch the S6?

The format is 360×640 pixels but has just “more” pixels inside? High density?

[Shikkediel]

Yeah, ppi is of no influence on that query. There’s a bunch of other ones that target resolution. So you should be good (in landscape mode at least). I don’t think the scrollbar counts on mobile?

[Author]

Posts