CODEWITHSUNDEEP
cssmedia-querieskindle-fire
IYE
IYE

Reputation: 79

Kindle Fire 8.9 HDX media query

Im trying to style for the Kindle Fire HDX 8.9.

On amazon's website

the resolution is listed as 2560 x 1600. However when I target it with media queries at this resolution, it doesnt work. The rest of the query below seems to work, but I'd like to get the specific resolution right in order not to target hi-res monitors:

@media only screen
and (-webkit-device-pixel-ratio: 2) and (max-resolution: 800dpi) and (orientation : landscape)

I've tried (max-width: 2560px) and (min-width: 1600px) in addition to this, but this doesn't seem to work. Do I need to reduce the pixels to account for the pixel ratio?

Upvotes: 2

Views: 2909

Answers (1)

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7248

For Kindle Fire HDX which is 1.5 xhdpi you need:

@media only screen and (min-device-width: 1200px)
    and (max-device-width: 1600px)
    and (-webkit-device-pixel-ratio: 1.5) {

This will work for both Kindle version, HD and HDX, that's why I used min and max width.

Model resolution PPCM (PPI) Pixel Ratio

Kindle Fire HD 8.9" 1920x1200 100 (254) 1.5 hdpi

Kindle Fire HDX 8.9" 2560x1600 133 (339) 1.5 xhdpi

Upvotes: 3

Related Questions