问题
I am developing a mobile website, and I've come across an interesting issue.
I'm testing on my desktop, as well as on my Motorola Droid (Android 2.2). I have media queries set up to load 3 different stylesheets (320px wide, 480px wide, and 640px wide). I noticed that my Droid is loading the 320px stylesheet despite having a 480x854px screen. I set up a little JS to find out what the screen width is, and it's reporting 320px.
Does the Android browser run in MDPI on HDPI screens? It's scaling the 320px properly to fill the screen, but I'm a little confused why this is happening.
Also, I do have <meta name="viewport" content="width=device-width"> on my page, so that is not the issue.
回答1:
Many OEMs have chosen to set their default browser viewport dimensions based on those of the iPhone (or similar resolutions) despite having an altogether different resolution. Apple had a similar problem with the release of the 'retina display' on the iPhone 4 where the spec sheet states 640px across, but screen.width will return 320px when is set.
As @omermuhammed mentioned base your logic on screen.width, CSS @media queries AND/OR device detection using WURFL or DeviceAtlas.
The following article may also be of interest in helping to clarify the issue:
A pixel is not a pixel is not a pixel by @ppk http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
回答2:
I don't know in context of Android Browser, but I have seen handsets where Android reported wrong screen size. I would recommend basing your logic on a combination of user agent string AND screen resolution. This way you can detect this handset and handle differently, and use normal mechanisms with others.
回答3:
I have noticed a few issues with getting screen.width and screen.height on Android 4.2.
- Dimensions are not updated to reflect the orientation of the device.
You can correct this if you wish to by first getting orientation, then switching the values accordingly.
http://menacingcloud.com/?c=orientationScreenWidth
http://davidwalsh.name/orientation-change (nice matchMedia usage)
- OS user interface elements are subtracted from the actual device screen dimensions.
E.g. nexus 7 screen is 1280x800, 1205x800 is reported. 75px for the OS buttons.
- Ideally (in my opinion), the values should be reported in CSS pixels, not device pixels.
E.g. nexus 7, CSS viewport is set to 600px in portrait, but screen.width reports 800px. So DPR is approx 1.33
Overall, screen.width and screen.height are not very reliable (iOS has orientation issues as well).
I'll hopefully re-edit this answer with more detail soon.
来源：https://stackoverflow.com/questions/7999000/android-browser-reporting-the-wrong-screen-size