Media queries to distinguish between Kindle e-inks vs non-e-inks

Question

I would like to separate styles (colors) for e-ink Kindles and the rest. It could be quite easy if monochrome or color queries worked. As far as I know, I have to use a workaround. It is said Kindle Previewer does not support queries properly, particularly more complex queries.

I would think these two could do that, however, I am not sure.

For non-e-inks:

@media not amzn-mobi,
       not amzn-kf8 and (device-height:1024px) and (device-width:758px),
       not amzn-kf8 and (device-height:758px) and (device-width:1024px),
       not amzn-kf8 and (device-height:800px) and (device-width:600px),
       not amzn-kf8 and (device-height:600px) and (device-width:800px),
       amzn-kf8 and (device-aspect-ratio:1280/800) {
       /* COLOR VERSION for any device except Kindle e-inks */

For e-inks:

@media amzn-mobi,
       amzn-kf8 and (device-height:1024px) and (device-width:758px),
       amzn-kf8 and (device-height:758px) and (device-width:1024px),
       amzn-kf8 and (device-height:800px) and (device-width:600px),
       amzn-kf8 and (device-height:600px) and (device-width:800px) {
       /* BW VERSION for e-ink-based Kindles */

Is it possible to do that this way? It does not seem to work.

I used these two sources: 1, 2.

Answer 1

The preferred solution (and the one I use) is to create default css outside of the media query breakpoints, and then this css will apply to e-ink devices (which don't support media queries -- even the amzn-mobi one, to my knowledge)

You should check the PDF of "Amazon Kindle Publishing Guidelines" on their website. Current version is 2015.4

I think your sample code is fine; my experience has been that it is unnecessary (and cumbersome) to use amzn-mobi in your media query. You can just use generic ones and you'll be fine.

My personal experience is that this breakpoint you listed is unnecessary:

 amzn-kf8 and (device-aspect-ratio:1280/800) 

I don't have all the devices to test with, but some things I have learned is:

1. Kindle app for android and Kindle Fire devices render things very similarly.
2. Older e-ink devices also do an admirable job for limited hardware. The main thing you need to check is image size. The trick is to use high quality images (1000px or 1500px) in the epub/mobi file and then let the Kindle website reduce its size accordingly. Don't try to figure out the algorithm Kindle uses for shrinking images. I used to waste a lot of brain cells on that. I actually posted my tips on formatting images for kindle devices here: https://kdp.amazon.com/community/thread.jspa?threadID=291039&tstart=15
3. Kindle for Ipad 1 and the for latest Ipads and Ipad Minis are relatively similar for the purpose of testing (aside from screen dimensions obviously).

Answer 2

I came up with something very close to what you have, see this thread:

http://www.mobileread.com/forums/showthread.php?t=274927

The media query I have is:

/*
kindle 1/kindle 2/kindle DX, 
paperwhite portrait,
paperwhite landscape,
"other kindles" portrait,
"other kindles" landscape,
voyage portrait,
voyage landscape
*/
@media amzn-mobi,
  amzn-kf8
  and (device-height:1024px) 
  and (device-width:  758px),
  amzn-kf8
  and (device-height:758px) 
  and (device-width:1024px),
  amzn-kf8 
  and (device-height: 800px) 
  and (device-width: 600px), 
  amzn-kf8 
  and (device-height: 600px) 
  and (device-width: 800px),
  amzn-kf8 
  and (device-height: 1448px) 
  and (device-width: 1072px),
  amzn-kf8 
  and (device-height: 1072px) 
  and (device-width: 1448px) {
    p {
      ...
    }
}

Missing only the Oasis at this time. I tested it across a variety of devices and met with success. Did you test your queries on a physical device, or just the Kindle Previewer?

Note that I would be treating non-e-ink kindles as "default" here, and overriding with this query. If you wanted the stylesheet to be global, you could do non-e-ink CSS in a @media amzn-kf8 query just before this one.