Answers.Body: <p>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)</p>
  
  <p>You should check the PDF of "Amazon Kindle Publishing Guidelines" on their website. Current version is 2015.4 </p>
  
  <p>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. </p>
  
  <p>My personal experience is that this breakpoint you listed is unnecessary: </p>
  
  <pre><code> amzn-kf8 and (device-aspect-ratio:1280/800) 
  </code></pre>
  
  <p>I don't have all the devices to test with, but some things I have learned is: </p>
  
  <ol>
  <li>Kindle app for android and Kindle Fire devices render things very
  similarly.</li>
  <li>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: <a href="https://kdp.amazon.com/community/thread.jspa?threadID=291039&amp;tstart=15" rel="nofollow">https://kdp.amazon.com/community/thread.jspa?threadID=291039&amp;tstart=15</a></li>
  <li>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).</li>
  </ol>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-04-13T11:12:55.557Z
Answers.Text: Thanks. It seems there is no clean way how to do this, the media queries support is really cropped here. As far as I could find in AKP Guidelines, only `amnz-mobi` and `amzn-kf8` are officially supported conditions. Who knows how the rest is treated? At the moment, I can live with that. Hope devs could add broader support in the future.
Answers.UserDisplayName: Honza Hejzl
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-04-13T19:06:03.500Z
Answers.Text: It would make sense to support a media query that distinguishes between monochrome vs. color, and I wouldn't be surprised if the latest e-eink Kindles do so eventually. . A few years ago I think I did a test ebook comparing colors vs. how e-ink renders colors -- and it helped me to figure out which color combinations to avoid in e-ink.
Answers.UserDisplayName: idiotprogrammer
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-04-12T22:12:24.607Z
Answers.LastActivityDate: 2016-04-12T22:12:24.607Z
Answers.UserDisplayName: idiotprogrammer
Answers.Body: <p>I came up with something very close to what you have, see this thread:</p>
  
  <p><a href="http://www.mobileread.com/forums/showthread.php?t=274927" rel="nofollow">http://www.mobileread.com/forums/showthread.php?t=274927</a></p>
  
  <p>The media query I have is:</p>
  
  <pre><code>/*
  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 {
        ...
      }
  }
  </code></pre>
  
  <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?</p>
  
  <p>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 <code>@media amzn-kf8</code> query just before this one.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-07T03:47:07.177Z
Answers.LastActivityDate: 2016-06-07T03:47:07.177Z
Answers.UserDisplayName: Matt Mc
Body: <p>I would like to separate styles (colors) for e-ink Kindles and the rest. It could be quite easy if <code>monochrome</code> or <code>color</code> 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.</p>
  
  <p>I would think these two could do that, however, I am not sure.</p>
  
  <p>For non-e-inks:</p>
  
  <pre><code>@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 */
  </code></pre>
  
  <p>For e-inks:</p>
  
  <pre><code>@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 */
  </code></pre>
  
  <p>Is it possible to do that this way? It does not seem to work.</p>
  
  <p>I used these two sources: <a href="http://epubsecrets.com/media-queries-for-kindle-devices.php" rel="nofollow">1</a>, <a href="http://help.atavist.com/ebook:css" rel="nofollow">2</a>.</p>
  
Tags: <kindle><css><e-ink><media-queries>
Title: Media queries to distinguish between Kindle e-inks vs non-e-inks
UserDisplayName: Honza Hejzl
ThreadText: # Media queries to distinguish between Kindle e-inks vs non-e-inks
  
  (Asked by: username_0 on 2016-04-12)
  
  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](http://epubsecrets.com/media-queries-for-kindle-devices.php), [2](http://help.atavist.com/ebook:css).
  
  **Tags:** kindle, css, e-ink, media-queries
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2016-04-12. Score: 3 | Accepted answer
  
  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).
  
  > **Comments:**
  > **username_0**: Thanks. It seems there is no clean way how to do this, the media queries support is really cropped here. As far as I could find in AKP Guidelines, only `amnz-mobi` and `amzn-kf8` are officially supported conditions. Who knows how the rest is treated? At the moment, I can live with that. Hope devs could add broader support in the future.  
  > **username_1**: It would make sense to support a media query that distinguishes between monochrome vs. color, and I wouldn't be surprised if the latest e-eink Kindles do so eventually. . A few years ago I think I did a test ebook comparing colors vs. how e-ink renders colors -- and it helped me to figure out which color combinations to avoid in e-ink.  
  
  ---
  
  ### Answer by username_2 on 2016-06-07. Score: 1
  
  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.
  
  
  ---
  
  