【发布时间】：2013-11-19 11:10:50
【问题描述】：
我不知道我是否误解了屏幕分辨率工作原理的基本原理，但我在 Kindle Fire HD (7") 上遇到了问题。
我有一个响应式设计的页面，正常情况下，它使用 CSS 媒体查询来更改某些元素的呈现方式。这在所有经过测试的浏览器和设备上都可以正常工作，除了使用 Kindle Fire HD (7") 浏览时。根据规格 (http://en.wikipedia.org/wiki/Kindle_Fire_HD)，它的屏幕分辨率为 1280 x 800 像素. 当我在 tools.scientiamobile.com 使用 WURFL 的测试工具检查设备时，也验证了这一点。
所以...我设置了断点屏幕宽度
- 'mobile' - 767px 及以下
- '平板电脑' - 768 - 989 像素
- '桌面' - 990px 及以上
...所以我希望 Kindle Fire 以“平板电脑”模式纵向显示我的页面，或以“桌面”模式横向显示我的页面。然而，它以出人意料的小断点显示它：纵向的“移动”模式和横向的“平板电脑”模式。
仔细检查后，我不确定这实际上与我的网页或其 CSS 有多大关系。使用此设备时，我似乎还看到了其他 RWD 站点的“较小”断点视图（例如，在纵向模式下，我得到了 getbootstrap.com 的“小”断点视图，它的目标是 767px 及以下）。
然后奇怪的是，当使用 JavaScript 检测屏幕尺寸时，我得到 534 x 854px（并且还在其他网站上再次测试过，比如 supportdetails.com，得到了相同的结果)。
我没有发现此设备报告的任何类似问题，所以我想知道 a) 是否有人遇到过类似问题，或者 b) 我是否只是误解了不同设备如何检测屏幕分辨率的关键问题。
谢谢！
【问题讨论】：
-
我想知道这是否与 Android 正在使用的 dp 大小有关 - 对于本机资产，它认为设备宽度为 533 - developer.amazon.com/sdk/fire/screen-layout.html#MultLayout
-
谢谢，一定是的。您的链接报告 Kindle Fire HD 7" 的比例为 1.5 - 因此显示的分辨率宽度确实应该是 533 像素（而“真实”设备分辨率宽度是 800）。我认为令人困惑的是大多数设备都报告了他们的“屏幕”分辨率”以包括比例 - 例如 iPad 4 报告其屏幕分辨率为 1024 x 768，但其“真实”分辨率是该分辨率的两倍。Kindle Fire HD 在其报告的屏幕分辨率中不包括比例，因此我的目标是错误的断点。
-
这是一个 hack，但也许你可以使用这个检测代码 - jsfiddle.net/kK569 - 来选择一组合适的媒体查询
-
这真的很有帮助，谢谢 - 是的，我想知道这是否是目前最好的解决方案。
标签： resolution screen-resolution kindle-fire