James Eggers and I had a quick exchange on Twitter about the new Kindle Fire HDX. The question was posed: What would the viewport resolution of the device be?

Imagine the chaos that would ensue if it was an unscaled screen at 2560×1600.

1. The web development world would burn, and I would find it hilarious.
2. Once I got done laughing, I’d panic. How the heck do you address that specific class of device?

The reasons to specifically target this type of screen are plentiful, but the most important one is accessibility. 16px font on an unscaled display with this high resolution would be unreadable. We’d need to manually scale all the content on the page, so I hope for your sake you’ve used relative units like ems and percentages to size everything.

Media queries, as is often the case, are the answer. Without a device to test this media query on (no device with an unscaled 2560×1600 screen exists, as far as I can tell), this is the best I can come up with:

@media only screen and 
       (min-width:2560px) and
       (-webkit-max-device-pixel-ratio: 1) and 
       (min-resolution: 339dpi) {
        /* STYLES SPECIFIC TO HIGH RES/
           UNSCALED SCREEN HERE */
}

My goodness.

I’d love to get your take on the media query necessary to address just this class of device. Tweet it to me or drop it in the comments.