Kindle Fire HD10 media query

Question

I need to write specific styles for Amazon Fire HD 10. So far I have wrote specific styles for other versions. Ex: Fire HD 7, Fire HD 8 like. Following is my current media query code.

@media only screen
    and (max-device-width: 1280px)
    and (max-device-height: 800px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 1) 

But this codes not working for the Amazon Fire HD 10. How can I write Amazon Fire HD 10 specific styles..? How can I target that only..?

Answer 1

I have a Kindle Fire HD10 so following the advice from @user7234396 in the comments shows me you need to adjust the -webkit-min-device-pixel-ratio to 1.5

I also follow the advice of CSS-Tricks and use min and max device widths rather than using device heights.

Therefore, to target this specific device in landscape orientation as you have in the question, you need

@media only screen
    and (min-device-width: 800px)
    and (max-device-width: 1280px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 1.5) {

}

Obviously for portrait you need

@media only screen
    and (min-device-width: 800px)
    and (max-device-width: 1280px)
    and (orientation: portrait)
    and (-webkit-min-device-pixel-ratio: 1.5) {

}