CODEWITHSUNDEEP
cssmedia-queries
Pablo
Pablo

Reputation: 485

CSS: Target Galaxy Tab 3 Only with Media Queries

I just want to target with media query a galaxy tab 3. According to its resolution (1280 x 800) it should be:

@media (max-device-width: 800px) and (orientation: portrait) {  
 }

@media (max-device-width: 1280px) and (orientation: landscape) { 
}

The problem is that some iMacs has this same resolution, and my fix to Galaxy Tab 3 affects this device. Any way to not affect imac? Thanks in advance

Upvotes: 0

Views: 8247

Answers (1)

M-Pixel
M-Pixel

Reputation: 3587

There's no way to do device-specific media queries, unfortunately, but there is a solution. From a practical design perspective, what makes the iMac and the Galaxy Tab different if they're the same resolution? Their DPI. That's something you can query for! Accroding to http://tablets.findthebest.com/l/232/Samsung-Galaxy-Tab-3-7-0 it's 169 ppi.

@media (max-device-width: 800px) and (orientation: portrait) and (min-resolution: 169dpi) { }
@media (max-device-width: 1280px) and (orientation: landscape) and (min-resolution: 169dpi) { }

You might need to do -webkit-min-device-pixel-ratio as well, but I can't tell you what the Tab's default ratio is (probably 1.5, but you can check here: http://bjango.com/articles/min-device-pixel-ratio/ )

@media
    (max-device-width: 800px) and (orientation: portrait) and (min-resolution: 169dpi),
    (max-device-width: 800px) and (orientation: portrait) and { }
@media
    (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: #) (min-resolution: 169dpi),
    (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: #) { }

Upvotes: 3

Related Questions