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..?

Do you have access to the device? (can you use it to visit a specific page now?) if so, you can use it and visit http://pieroxy.net/blog/pages/css-media-queries/test-features.html to see what media queries apply to it. — , Dec 21 '16 at 06:29
@ILoveCSS Thank you very much. Got the point and I am in my way. :) — WP Learner, Dec 21 '16 at 07:22

score 0 · Answer 1 · answered Oct 25 '20 at 12:48

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) {

}

Kindle Fire HD10 media query

1 Answers1