Media Queries – Device or Desktop

[seanjacob]

I just wanted to make sure I am doing this correct, I want my device and desktop to look the same at a certain size, for example everything under 480px (mobile).

Before retina I would do it like this, targeting desktop and device –

@media all and (max-width: 480px) { }

But now I do this because of retina devices, their width will become 960px so I need to use a separate device width query.

@media all and (max-device-width: 480px), (max-width: 480px) { }

Is this correct? I haven’t seen any examples for targeting both, I thought developers would want their site to look the same for device and desktop at a certain size.

[CrocoDillon]

Retina is still `max-width: 480px` (for iPhone 4/4S), don’t need `max-device-width`.

[seanjacob]

Whoops, sorry it was cache sending me crazy! Thanks for the reply.

[Author]

Posts