0

I don't know if I'm misunderstanding something fundamental in how screen resolutions work, but I'm getting stuck on an issue with the Kindle Fire HD (7").

I have a responsively designed page that, as normal, uses CSS media queries to change the presentation of certain elements. This works as expected on all browsers and devices tested, except for when browsing with the Kindle Fire HD (7"). According to specs (http://en.wikipedia.org/wiki/Kindle_Fire_HD) it has a screen resolution of 1280 x 800 px. This is also verified when I check the device using WURFL's test tool at tools.scientiamobile.com.

So... I have breakpoint screen widths set for

  • 'mobile' - 767px and below
  • 'tablet' - 768 - 989 px
  • 'desktop' - 990px and above

... so I'd expect the Kindle Fire to display my page in 'tablet' mode in portrait orientation, or 'desktop' mode in landscape. However instead it shows it in unexpectedly smaller breakpoints: 'mobile' mode in portrait, and 'tablet' mode in landscape.

On closer inspection, I'm not sure this is actually much to do with my webpage, or its CSS. When using this device, I also seem to be seeing 'smaller' breakpoint views of other RWD sites (e.g. in portrait mode, I get the 'tiny' breakpoint view of getbootstrap.com, which is aimed at 767px and below).

What's then strange is that, when detecting the screen size using JavaScript, I get 534 x 854px (and have also tested this again on other sites, like supportdetails.com, and got the same results).

I haven't found any similar issues reported re this device, so I'm wondering a) if anyone's encountered similar issues, or b) if I'm just misunderstanding something crucial with how screen resolutions are detected by different devices.

Thanks!

nickisme
  • 83
  • 1
  • 8
  • I'm wondering if this relates back to the dp sizes that Android is using - for native assets it sees the device width as 533 - https://developer.amazon.com/sdk/fire/screen-layout.html#MultLayout – Offbeatmammal Nov 20 '13 at 14:54
  • Thanks, yes it must be. Your link reports the Kindle Fire HD 7" to have a scale of 1.5 - so the displayed resolution width should indeed be 533px (while the 'real' device resolution width is 800). I think the confusion is that most devices report their 'screen resolutions' to include the scales - e.g. iPad 4 reports its screen resolution as 1024 x 768, but its 'real' resolution is double that. Kindle Fire HD doesn't include the scale in its reported screen resolution, hence I'm targeting the wrong breakpoints. – nickisme Nov 22 '13 at 11:48
  • it's a hack, but maybe you could use this detection code - http://jsfiddle.net/kK569/ - to select an appropriate set of media queries – Offbeatmammal Nov 22 '13 at 17:41
  • That's really helpful, thanks - yeah, I wonder whether that may be the best solution for the moment. – nickisme Nov 25 '13 at 09:56

1 Answers1

0

When doing media queries you need to take into account the CSS pixel ratio.

The value you need to use on the media query = (The Advertised number of pixels) / (CSS Pixel Ratio).

This wikipedia page is a good source of CSS pixel ratios to use for this:

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Good Luck

glimmer
  • 577
  • 4
  • 7