0

In section 8.1.4 of the Kindle Formatting Guide, it provides an example of a css media query to target ipad devices. It looks like this: 

@media (device-width: 768px) {}

But the example is unclear; is this a simple media query used when you upload epubs into the ibooks app? Or is this an actual query which is digested and followed by the Kindle app on the ipad?

Are there any media queries which will be seen by Kindle for ios?

UPDATE: I've been investigating and testing some more. It seems that the heart of my question is how the Kindle app for ios handles collisions between "@media" and "@amzn-kf8" media queries. The Kindle documentation doesn't address this accurately. I'll post my findings soon.

Improve this question
1
  • What did you end up concluding on this? :)
    – Matt Mc
    Commented Jun 6, 2016 at 4:26

1 Answer 1

Reset to default
1

Or is this an actual query which is digested and followed by the Kindle app on the ipad?

This is an actual media query that you can use in Kindle KF8 books. For example, you could use the following code to display paragraphs in red if the orientation is changed to landscape.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
    <style type="text/css">
/*<![CDATA[*/
  @media (orientation: landscape) {
  p {
    color: red;
  }
  }
  /*]]>*/
  </style>
</head>

<body>
  <h1>Media query test</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc.
  Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at
  pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor,
  augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula.</p>
</body>
</html>

Note that media queries only work with AZK (KF8) files. (Kindle Previewer will automatically generate an .azk file if you set the default device mode to Kindle for iPad/iPhone.)

Improve this answer
3
  • (Thanks for your comment. I'm currently in the middle of testing various media queries). I think my issue is with collisions between "@media" and "@amzn" . I'll report back with my results.
    – idiotprogrammer
    Commented Dec 14, 2015 at 12:19
  • I just wanted to say that kindle files support all kinds of media queries, including both proprietary and generic. Generally they don't work on e-ink, and work fairly well on other devices.
    – idiotprogrammer
    Commented Mar 14, 2016 at 15:26
  • @Nemo Curious, what's with the CDATA in comments? Is that to handle some reading system bug?
    – Matt Mc
    Commented Jun 5, 2016 at 21:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.