(Firstly, this issue is related to the Kindle Fire HD issue mentioned at http://www.scientiamobile.com/forum/vie ... f=16&t=419. However I've started a new discussion as that ended up being focused on other issues)
WURFL's reported screen resolution for the Kindle Fire HD 7" is 1280 x 800px, which correctly matches the device's own specification. However, when setting a webpage's viewport to be the device width, ie using...
Code: Select all
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
Code: Select all
@media screen and (min-width: 768px) and (max-width: 1023px) {
/*Should show on Kindle Fire HD 7" */
#mid-high {display:block}
}
... but it doesn't.
When detecting the device's screen resolution using JavaScript (e.g. using supportdetails.com), the dimensions are actually reported as 534 x 854px (NB the height is probably also smaller here due to the browser's chrome).
I think the reason for the difference in reported screen resolutions is that WURFL is reporting the 'physical' screen resolution, which hasn't been scaled down to factor pixel density. Conversely, the CSS and JS are detecting the 'displayed' screen resolution (which does factor in pixel density).
The confusion is that, as far as I can tell, WURFL does report the 'displayed' screen resolution (rather than the physical screen resolution) for other devices' 'resolution_width' / 'resolution_height' fields. For instance the iPhone 4's 'resolution_width' is reported by WURFL as 320px, but its real physical width is 640.
Our problem is that, as detailed in the post above, we're querying WURFL to detect if a device's width exceeds a screen width of 767px. If it does, a 'desktop' stylesheet is loaded. In the case of the Kindle Fire HD 7", it loads the desktop stylesheet. However there are a number of CSS media queries inside this, which are then not matching the device.
Hope this makes some sense, and sorry for the very long post!
Nick
PS In case it's useful, the UA string of the Kindle Fire HD 7 tested on is:
Mozilla/5.0 (Linux; U; en-gb; KFTT Build/IML74K) AppleWebKit/535.19 (KHTML, like Gecko) Silk/3.8 Safari/535.19 Silk-Accelerated=false
identified as a Amazon KFTT (Kindle Fire HD 7)