我正在尝试根据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设备的实际物理尺寸?
由于
答案 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" />