Android浏览器报错屏幕大小？

Question

我正在开发一个移动网站，我遇到了一个有趣的问题。

我正在我的桌面以及我的Motorola Droid（Android 2.2）上进行测试。我设置了媒体查询以加载3种不同的样式表（320px宽，480px宽和640px宽）。我注意到我的Droid正在加载320px样式表，尽管有480x854px的屏幕。我设置了一个小JS来找出屏幕宽度是多少，并报告320px。

Android浏览器是否在HDPI屏幕上的MDPI中运行？它正在适当地缩放320px以填满屏幕，但我有点困惑为什么会发生这种情况。

另外，我确实有＆lt; meta name =“viewport”content =“width = device-width”＆gt;在我的页面上，所以这不是问题。

Answer 1

尽管具有完全不同的分辨率，但许多OEM已选择基于iPhone（或类似分辨率）的默认浏览器视口尺寸进行设置。苹果公司在iPhone 4上发布了“视网膜显示器”时出现了类似问题，其中规格表显示640px，但是屏幕宽度设置时将返回320px。

正如@omermuhammed所提到的那样，你的逻辑基于screen.width，CSS @media使用WURFL或DeviceAtlas查询和/或设备检测。

以下文章也可能有助于澄清问题：

像素不是像素不是@ppk的像素 http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Answer 2

我不知道Android浏览器的上下文，但我看过Android报告错误的屏幕尺寸的手机。我建议将您的逻辑基于用户代理字符串和屏幕分辨率的组合。通过这种方式，您可以检测到此手机并以不同方式处理，并与其他人一起使用正常机制。

Answer 3

我注意到在Android 4.2上获取screen.width和screen.height有一些问题。

• 尺寸未更新以反映设备的方向。

如果您希望首先获得方向，然后相应地切换值，则可以更正此。

http://menacingcloud.com/?c=orientationScreenWidth

http://davidwalsh.name/orientation-change（很好的匹配媒体用法）

• 从实际设备屏幕尺寸中减去OS用户界面元素。

E.g。 nexus 7屏幕为1280x800，据报道为1205x800。操作系统按钮为75px。

• 理想情况下（在我看来），值应以CSS像素报告，而不是设备像素。

E.g。 nexus 7，CSS视口的纵向设置为600px，但screen.width报告800px。所以DPR约为1.33

总体而言，screen.width和screen.height不太可靠（iOS也有方向问题）。

我希望很快能够更详细地重新编辑这个答案。