在javascript或css中检测Android屏幕大小 - 没有得到我所期待的

时间:2011-12-21 15:14:08

标签: javascript android css

我正在尝试根据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"/> 

但是没有一个工作,我会不断变得无效(或有效,但不是我期待的)不同的Android设备的值 ('screen.width'和'window.innerWidth'总是显示320px,即使我使用的尺寸为240X320,320X480和480X800)。

如何检测Android设备的实际物理尺寸?

由于

6 个答案:

答案 0 :(得分:2)

尝试拨打http://axels-fahrradladen.de/ressources/testing/8592028/我在那里安排了一项测试。

对我而言,它正在发挥作用! 480就是我拥有并展示出来的。

如果您显示的号码不对,那就是您的手机,模拟器或浏览器。否则就是代码。

希望这有帮助。

答案 1 :(得分:1)

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

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

答案 2 :(得分: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">

通知单词'only' - 不支持媒体查询的浏览器将忽略此mobile.css链接。 不要忘记添加元标记,否则您的智能手机浏览器会认为它是一个大屏幕:

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

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

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

回应@keaukraine他的回答: 不幸的是,像cm,in等物理单位的方法不起作用,你可以在这里阅读:

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

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

答案 5 :(得分:-2)

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

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