Geek Answers Handbook

Android, how to smell the screen size from webkit browser?

The web server wants to obtain information about the screen size from each mobile phone browsing the web page. The javascript functions screen.width and screen.height return wildly inaccurate values.

Is there a way for a web server to determine the screen size of a mobile phone? Client browser - webkit on Android.

+4
source share
3 answers

You can try using CSS multimedia queries, which we hope will use the correct values.

<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 320px)" href="logResolutionScript?width=320" />

Use basically the same rules for other width and height and cookie values ​​to check if the client is loading more than one stylesheet to get the correct value. You won’t get the exact resolution, but it should be close enough. You can also check the orientation and use the max / min- (device) -width combinations. There may be quite a lot of css imports in your file, but you should be able to accurately determine client resolution, unfortunately, due to several HTTP requests.

CSS3 Media Queries (Specification)

+1
source

I found this article useful, which mentions a meta tag that affects Android and iPhone browsers, which did what I needed:

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

From Mislav article: what Mobile Safari does by default (i.e. without this directive) displays an enlarged version of the page with a width of 980 pixels, even if the layout itself is already. As authors of content, with this directive we say "trust me, get closer to the natural scale, and I will be sure that it fits"

It seems that the screen size and width values ​​are correct when reading from JavaScript, because the page is not enlarged (and if the page is larger, you can still scroll it). Alternatively, there may be a javascript variable to read the zoom level.

For iPhone, this is documented here .

+1
source

On Android, you can work out the current scaling by adding an absolute div to the body 100% wide and dividing the offset offsetWidth by window.innerWidth .

 var iPadMeasureWidthNode = window.iPadWNode; if (!iPadMeasureWidthNode) { iPadMeasureWidthNode = window.iPadWNode = document.createElement('div'); // .ipad-measure-w {position:absolute; width:100%; top:-1px} iPadMeasureWidthNode.className = 'ipad-measure-w'; document.body.insertBefore(iPadMeasureWidthNode, document.body.firstChild); } var zoominverse = 1000 / Math.round(1000 * iPadMeasureWidthNode.offsetWidth / window.innerWidth);

You can save an element with a 1: 1 magnification by inverting (decreasing) the magnification scale:

 // Not using scale3d because is hardware zooming which is ugly unreadable blurry pixel magnification. node.style.webkitTransform = (zoominverse > 1) ? 'scale(' + zoominverse + ')' : ''; node.style.webkitTransformOrigin = (zoominverse > 1) ? '0 0 0' : '';

Resizing is detected by the window.onresize event (although the resizing event is delayed until resizing is completed ... you can detect the start of scaling using the gesturestart event on the iPad or the document.touchstart event and detect 2 fingers down).

Edit: after three corrections saying that this does not work, I thought it was better to add an example showing that it works. Tests: Android 4.1.2 regular browser, Android 4.1.2 Chrome, Android Opera Mobile 12.10, iPad 2 iOS4. (Does not work on Android Firefox Mobile and will not work in iframes, so jsfiddle will not work).

 <!DOCTYPE html> <html> <head> <style> .ipad-measure-w { position: absolute; width: 100%; top: -1px; }; </style> </head> <body> <button onclick="alertWidth()">alertWidth</button> <div style="width: 1600px; height: 100px; background-color: blue;"></div> <script> function alertWidth() { var iPadMeasureWidthNode = window.iPadWNode; if (!iPadMeasureWidthNode) { iPadMeasureWidthNode = window.iPadWNode = document.createElement('div'); iPadMeasureWidthNode.className = 'ipad-measure-w'; document.body.insertBefore(iPadMeasureWidthNode, document.body.firstChild); } var zoominverse = 1000 / Math.round(1000 * iPadMeasureWidthNode.offsetWidth / window.innerWidth); alert(zoominverse); } </script> </body> </html>
0
source

More articles:


All Articles