Media query values for Kindle Fire (Previewer)

So in addition to the new media types of kndl-mobi and kndl-kf8, KF8 supports most of the standard media queries. From testing, here are the values for each in the Previewer in Kindle Fire mode:

  • width: 526px (portrait) or 950px (landscape)
  • height: 990px (portrait) or 566px (landscape)
  • device-width: based on monitor’s resolution
  • device-height: based on monitor’s resolution
  • orientation: portrait or landscape
  • aspect-ratio: 526/990 (portrait) or 950/566 (landscape)
  • device-aspect-ratio: based on monitor’s resolution
  • color: based on monitor’s settings
  • color-index: not supported
  • monochrome: 0
  • resolution: not supported
  • grid: 0

The previewer is using the values for the computer’s monitor for device-width, device-height, device-aspect-ratio, and color, rather than the Fire’s values.

Testing on the Kindle Fire (thanks to Matthew Diener) revealed that the Previewer isn’t very reliable. First, the Fire doesn’t support :after, unlike the Previewer. The second version of the test (available here) resulted in this:

So many values are different. Device-aspect-ratio seems to be both 1024/600 and 600/1024; that’s non-standard, but reasonable, I guess. Important to keep in mind if using min- or max-device-aspect-ratio. No idea what device-width and device-height are; I’d try 1024 and 600 without px next.

The values for width and height seem to correctly give the viewable area for the Previewer, but are different on the Fire, except for width in portrait mode. Also, it seems that width and height may not update when the orientation is changed. Orientation works fine, despite not being listed in the Kindle Publishing Guidelines Appendix B, while color-index is not supported despite being listed there.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>