Determining Android screen size in javascript or css - don't get what I expect

Question

I am 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 metathete:

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

But no one works, I continue to receive invalid (or real, but not what I expect) values ​​for different Android devices ("screen.width" and "window.innerWidth" always show 320 pixels, even if I use devices with a size of 240X320 , 320X480 and 480X800).

How can I determine the actual physical size of Android devices?

thanks

Answer 1

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

It works for me! 480 is what I have and which is shown.

If the number is displayed incorrectly for you, this is your phone, emulator or browser. Otherwise, this is the code.

Hope this helps.

Answer 2

I assume this has something to do with the target-densityDPI meta tag. http://developer.android.com/guide/webapps/targeting.html#ViewportDensity

The Android browser, by default, considers its screen size to be 320 x to try and be more compatible with sites designed for the iPhone. You can override this behavior with a meta tag. If you drop this in the title of your page, it may give you the expected results.

Answer 3

The general idea is that you have two CSS files. One for desktop computers and the other for mobile devices (smartphones and tablets can be processed separately):

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

Pay attention to the word "only" - this link to mobile.css will be ignored by browsers that do not support media queries. Do not forget to add the meta tag, otherwise the browser of your smartphone will consider it a large screen:

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

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

It correctly displays the page in Android browsers and in all browsers on the desktop.

Answer 4

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

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

Answer 5

In response to @keaukraine his answer: An approach with physical units such as cm, etc., Unfortunately, does not work, as you can read here:

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

I also wanted to go that route, but now I decided to stick with an em-based approach.

Answer 6

The same issue is discussed here by Android: displaying the wrong screen resolution. The proposed solution is to add the following line to the manifest.xml file

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