Kindle Fire HD(7“)屏幕分辨率:spec和JS / CSS检测分辨率之间的差异

时间:2013-11-19 11:10:50

标签: resolution screen-resolution kindle-fire

我不知道我是否误解了屏幕分辨率如何工作的基本功能,但我遇到了Kindle Fire HD(7“)的问题。

我有一个响应式设计的页面,正常情况下,使用CSS媒体查询来更改某些元素的表示。这在所有测试的浏览器和设备上都能正常工作,除了使用Kindle Fire HD(7“)浏览时。根据规格(http://en.wikipedia.org/wiki/Kindle_Fire_HD),它的屏幕分辨率 1280 x 800 px。当我在tools.scientiamobile.com上使用WURFL的测试工具检查设备时,也会对此进行验证。

所以...我为

设置了断点屏幕宽度
  • 'mobile' - 767px 及以下
  • '平板电脑' - 768 - 989 px
  • '桌面' - 990px​​ 及以上

...所以我希望Kindle Fire以纵向方式在“平板电脑”模式下显示我的页面,或在横向显示“桌面”模式。然而,它却以意想不到的较小断点显示它:纵向的“移动”模式和横向的“平板电脑”模式。

仔细观察,我不确定这实际上与我的网页或其CSS有很大关系。当使用这个设备时,我似乎也看到了其他RWD站点的“较小”断点视图(例如,在纵向模式下,我得到了getbootstrap.com的'微小'断点视图,其目标是767px及以下)。

奇怪的是,当使用JavaScript检测屏幕大小时,我得到 534 x 854px (并且还在其他网站上再次测试了这一点,例如supportdetails.com,并得到了相同的结果)。

我没有发现任何类似的问题报告此设备,所以我想知道a)是否有人遇到过类似的问题,或者b)如果我只是误解了一些对于不同设备检测到屏幕分辨率至关重要的事情。

谢谢!

1 个答案:

答案 0 :(得分:0)

在进行媒体查询时,您需要考虑CSS像素比率。

您需要在媒体查询上使用的值=(广告的像素数)/(CSS像素比率)。

这个维基百科页面是用于此目的的CSS像素比率的良好来源:

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

祝你好运