I'm trying to apply css based on the screen size of an android device.

using media query:

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

}

and javascript:

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

with or without the meta tag:

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

But none is working, I'm keep getting invalid(or valid, but not what I'm expecting) values for different android devices (the 'screen.width' and 'window.innerWidth' always shows 320px, even when I'm using devices of sizes 240X320, 320X480 and 480X800).

How can I detect the actual physical size of android devices?

Thanks

I'm trying to apply css based on the screen size of an android device.

using media query:

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

}

and javascript:

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

with or without the meta tag:

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

But none is working, I'm keep getting invalid(or valid, but not what I'm expecting) values for different android devices (the 'screen.width' and 'window.innerWidth' always shows 320px, even when I'm using devices of sizes 240X320, 320X480 and 480X800).

How can I detect the actual physical size of android devices?

Thanks

• javascript
• android
• css

• Check out: stackoverflow./questions/1016896/… – Noah Commented Dec 21, 2011 at 15:17
• Have you tested this on real devices or the android emulator? And which android version did you use? – user658042 Commented Dec 21, 2011 at 15:17

6 Answers 6

General idea is that you have two CSS files. One for desktop, and other for mobile (smartphones and tablets can be treated separately as well):

<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">

Notice word 'only' - this link to mobile.css will be ignored by browsers which don't support media queries. Don't forget to add meta tag, otherwise your smartphone browser will think it's a big screen:

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

I created fully working example of responsive layout here: http://kardash/misc/jslab/Acxiom/

It renders page properly in my Android browsers and in all my desktop browsers.

Try calling http://axels-fahrradladen.de/ressources/testing/8592028/ I have arranged a test there.

For me it's working! 480 is what I have and get shown.

If the number is shown wrong for you, it's your phone, emulator or browser. Otherwise it's the code.

Hope this helps.

My guess is it has something to do with the target-densityDPI meta tag. http://developer.android./guide/webapps/targeting.html#ViewportDensity

The Android browser by default treats its screen size as 320 x something to try and be more patible with sites designed for iPhone. You can override this behaviour with the meta tag. If you drop this in the header of your page, it might give you the results you're expecting.

You can specify physical dimensions in max-device-width media query:

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

In response to @keaukraine his answer: The approach with physical units like cm, in etc. does unfortunately not work as you can read here:

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

I also wanted to go this path but now I decided to stick with an "em" based approach.

The same issue is discussed here Android: Showing wrong screen resolution The suggested solution there is to add the following line to your manifest.xml file

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