All geek questions in one place

Does Android browser report incorrect screen size?

I am developing a mobile site and I have an interesting problem.

I am testing on my desktop as well as on my Motorola Droid (Android 2.2). I have media queries configured to load 3 different stylesheets (320 pixels wide, 480 pixels wide and 640 pixels wide). I noticed that my Droid loads a 320px stylesheet despite having a 480x854px screen. I set up a bit of JS to find out what the width of the screen is and it reports 320px.

Does the Android browser work in MDPI on HDPI screens? It scales 320 pixels correctly to fill the screen, but I'm a little confused about why this is happening.

In addition, I have <meta name = "viewport" content = "width = device-width"> on my page, so this is not a problem.

+6
source share
3 answers

Many OEMs decided to set their default browser viewing sizes based on iPhone settings (or similar resolutions), despite a completely different resolution. Apple had a similar issue with the release of the “retina screen” on the iPhone 4, where the spec contains 640px, but screen.width will return 320 pixels when installed.

As @omermuhammed mentioned, base your logic on screen.width, CSS @media asks for device discovery AND / OR using WURFL or DeviceAtlas.

The following article may also be of interest to clarify the problem:

A pixel is not a pixel, not a @ppk pixel http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

+5
source

I don’t know in the context of the Android browser, but I saw phones on which Android reported the wrong screen size. I would recommend basing your logic on a combination of a user agent string and screen resolution. So you can detect this tube and handle it differently and use the usual mechanisms with others.

0
source

I noticed a few problems getting screen.width and screen.height on Android 4.2.

  • Dimensions are not updated to reflect device orientation.

You can fix this if you want by first getting the orientation, then changing the values ​​accordingly.

http://menacingcloud.com/?c=orientationScreenWidth

http://davidwalsh.name/orientation-change (nice use of matchMedia)

  • OS user interface elements are subtracted from the actual device screen sizes.

eg. Nexus 7 - 1280x800, reports 1205x800. 75px for OS buttons.

  • Ideally (in my opinion), the values ​​should be in CSS pixels, not in the device pixels.

eg. nexus 7, the CSS viewport is set to 600 pixels in the portrait, but screen.width reports 800px. So the DPR is about 1.33

In general, screen.width and screen.height are not very reliable (iOS also has orientation problems).

I hope that in the near future I will edit this answer in more detail.

0
source

Source: https://habr.com/ru/post/900718/

More articles:


All Articles