javascript 或 css 中的 Android 屏幕尺寸检测 - 没有得到我所期望的答案

【问题标题】：Android screen size detection in javascript or css - not getting what I'm expectingjavascript 或 css 中的 Android 屏幕尺寸检测 - 没有得到我所期望的
【发布时间】：2014-08-08 22:33:11
【问题描述】：

我正在尝试根据 android 设备的屏幕尺寸应用 css。

使用媒体查询：

@media all and (max-device-width: 480px) {
    //apply css style to devices of screens with width no larger than 480px

}

和javascript：

window.innerWidth
window.innerHeight
screen.width
screen.height

有或没有元标记：

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, initial-scale=1, user-scalable=no"/>

但是没有一个有效，我不断得到不同安卓设备的无效（或有效，但不是我所期望的）值（'screen.width' 和 'window.innerWidth' 总是显示 320 像素，即使我使用尺寸为 240X320、320X480 和 480X800 的设备也是如此）。

如何检测安卓设备的实际物理尺寸？

谢谢

【问题讨论】：

签出：stackoverflow.com/questions/1016896/…
你在真机或安卓模拟器上测试过吗？你用的是哪个安卓版本？

标签： javascript android css

【解决方案1】：

一般的想法是你有两个 CSS 文件。一种用于台式机，另一种用于移动设备（智能手机和平板电脑也可以分开处理）：

<link media="screen and (min-device-width: 481px)" href="desktop.css" rel="stylesheet" type="text/css">
<link media="only screen and (max-device-width: 480px)" href="mobile.css" rel="stylesheet" type="text/css">

注意词“仅” - 不支持媒体查询的浏览器将忽略此指向 mobile.css 的链接。不要忘记添加meta标签，否则你的智能手机浏览器会认为它是一个大屏幕：

<meta name="viewport" content="initial-scale=1.0" />

我在这里创建了响应式布局的完整工作示例： http://kardash.net/misc/jslab/Acxiom/

它可以在我的 Android 浏览器和所有桌面浏览器中正确呈现页面。

【讨论】：

我可以使用<link media="only screen and (min-width: 240px) and (max-width: 320px)">吗？

【解决方案2】：

尝试拨打http://axels-fahrradladen.de/ressources/testing/8592028/我已经安排了测试。

对我来说它正在工作！ 480 是我所拥有并得到展示的。

如果您显示的号码有误，则可能是您的手机、模拟器或浏览器。否则就是代码。

希望这会有所帮助。

【讨论】：

【解决方案3】：

我的猜测是它与 target-densityDPI 元标记有关。 http://developer.android.com/guide/webapps/targeting.html#ViewportDensity

默认情况下，Android 浏览器将其屏幕尺寸视为 320 x 以尝试与专为 iPhone 设计的网站更兼容。您可以使用元标记覆盖此行为。如果您将其放在页面的标题中，它可能会为您提供您期望的结果。

【讨论】：

【解决方案4】：

您可以在max-device-width媒体查询中指定物理尺寸：

@media screen and (max-device-width: 23cm) and (orientation: landscape)

【讨论】：

【解决方案5】：

回应@keaukraine 他的回答：不幸的是，使用 cm、in 等物理单位的方法不起作用，您可以在此处阅读：

http://www.quirksmode.org/blog/archives/2012/11/the_css_physica.html

我也想走这条路，但现在我决定坚持使用基于“em”的方法。

【讨论】：

【解决方案6】：

这里讨论了同样的问题Android: Showing wrong screen resolution 建议的解决方案是将以下行添加到您的 manifest.xml 文件中

<uses-sdk android:minSdkVersion="3" android:targetSdkVersion="8" />

【讨论】：