View Single Post
Old 06-06-2016, 08:48 PM   #3
mattmc
Connoisseur
mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.mattmc can program the VCR without an owner's manual.
 
Posts: 89
Karma: 185923
Join Date: May 2015
Device: iPad 1/2/Air, K3/PW2/Fire1, Kobo Touch, Samsung Tab, Nook Color/Touch
(The conversation with myself continues!)

Re targeting K4iOS with a media query:

I haven't been able to discover a media query that did this. K4iOS seems to answer exactly the same as Kindle e-Inks in all ways except screen dimensions.

Rewind:

In the Amazon Kindle Publishing Guidelines, it recommends that you set your default styles to apply to Kindle e-Inks, and then use the following media query to target Kindle Fires:

@media screen and (device-aspect-ratio:1280/800) {...}

Then, to target iPads, it recommends that you do a standard device-with query:

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

Okay, so...does that work?

Sure. But then you need to do media queries for all sizes of iPad and iPhone that exist. That's doable, but not a small set of queries.

But then what about KDroid? There's no way you're going to set up media queries that will catch all the KDroid stuff. And what about on desktops? Hm...

Idea:
  1. Have default styles apply to K4iOS, KDroid, and anything else.
  2. Target Kindle eInks with specific media queries.
  3. Target Kindle Fires with the above media query if necessary.

This seems feasible because there's actually a fairly small list of Kindle eInks. What's that query going to look like?

Code:
/*
kindle 1/kindle 2/kindle DX, 
paperwhite portrait,
paperwhite landscape,
"other kindles" portrait,
"other kindles" landscape,
voyage portrait + oasis,
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 {
      ...
    }
}
The above query was compiled based on an epubsecrets post by Derrick Schultz and a gist by Sanders Kleinfeld.

Note: I haven't found media queries for the Kindle Oasis. If anyone has these device metrics please let me know so I can add them.

I have tested this query on the following devices and it correctly detects them as e-Inks:
  • Kindle 1st gen
  • Kindle 2nd gen
  • Kindle Keyboard
  • Kindle PW1
  • Kindle PW2
  • Kindle Oasis

I tested the query on the following platforms and it correctly did not detect them as e-Inks:
  • Kindle Fire 1st Gen
  • Kindle Fire HDX
  • Kindle for iOS 4.20 on iPad
  • Kindle for iOS 4.30 on iPod Touch 5th Gen
  • KDroid on Samsung Galaxy Tab 2, 7.0

Trying to get my hands on later generation Kindle Fires. I should also probably buy a Voyage...

Anyway, this basically allows me to differentiate the e-Ink kindles from the rest of their brethren! Hooray.

UPDATE: Added Oasis to the list of tested devices. 25-Jun-16

Last edited by mattmc; 06-25-2016 at 06:04 PM.
mattmc is offline   Reply With Quote