Mobile network: how to get the physical pixel size?

Question

I am building a web application using jQuery Mobile and PhoneGap. There is a graph, and if the user uses a large screen, I would like to display more points on this graph, because the points are tappable and should not be too close (physically).

For example: if someone has an iPhone, I want to display N points on a line graph. If it has an iPad, I want to display 2xN glasses (because the iPad has a physically larger screen), but if it has a newer Android phone that is physically small like an iPhone but has a screen with many pixels (like an iPad), I want to display N points because the points are physically small (and closer to each other).

So is there a way to get this data? An alternative is to determine if the device is a table.

Answer 1

What you want is to check the pixel density of the device - measured in DPI - since @Smamatti already mentioned that you control this using CSS multimedia queries.

Here's an article on how to deal with various DPI and screen sizes using these CSS formatted queries.

UPDATE: here's a javascript function (from the link above) that uses a trick to determine the current DPI device:

function getPPI(){ // create an empty element var div = document.createElement("div"); // give it an absolute size of one inch div.style.width="1in"; // append it to the body var body = document.getElementsByTagName("body")[0]; body.appendChild(div); // read the computed width var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width'); // remove it again body.removeChild(div); // and return the value return parseFloat(ppi); } 

Hope this helps!

Answer 2

This problem is complicated.

You can find out the screen resolution of your device in JavaScript using screen.width and screen.height, just like on the desktop.

However, on a mobile device, 1 CSS pixel will not necessarily have a 1: 1 aspect ratio with a physical screen pixel. Say your screen.width returns a value of 640 pixels. If you add a banner with a width of only 640 pixels, it will most likely go over the available screen width of your phone.

The reason for this is because mobile device manufacturers are setting the default view for the device for a different scale factor than the screen of your device. Thus, the contents of web pages that were not specifically designed for mobile devices will still be displayed without the need for scaling.

If you use the meta viewport tag, you can set the zoom factor of your viewport to 1: 1 by setting its width value to the width of the device, for example:

 <meta name="viewport" width="device-width" content="target-densitydpi=device-dpi" /> 

Now that the 640-pixel banner will exactly match your 640-pixel screen.

Unfortunately, from this point on, as far as I know, there is no real way to tell the actual size of the physical screen (in inches or mm) of the device that displays your web content. At least not in JavaScript. Although the browser can access some useful information, such as device.name or device.platform, you cannot determine how many inches or mm these 640 pixels represent if you do not know the screen measurements of this device in advance.

I understand very well why someone will need a version of the application for small phone screens and even larger tablet screens. For example, small buttons. Sometimes they are so close together that your finger will span two at once. At the same time, you don’t need these thick buttons designed for mobile screens, showing on a good 10-inch tablet.

You could, of course, with the help of screen.width and window.devicePixelRatio find out if you work, say, on the retina of the iPhone or iPad 2, but when you start to consider the many screen resolutions and pixel densities on Android devices, the task becomes almost impossible.

The solution goes Native.

On Android, you can use the code in the following thread to find out if your application is running on the big screen:

tablet or phone - Android

You can then use the code in this other thread to request your shell application from JavaScript using PhoneGap:

The relationship between Android Java and Phonegap Javascript?

With Apple, this is even more straightforward:

 if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) { //running on an iPad } else { //iPhone or iPod } 

And if you use the same naming convention for your Android and Apple objects, your code will still be universal, and that’s the whole point of PhoneGap. For example, in my case, I used the same names for both Java and my Objective-C objects and methods. In JavaScript, I just need to call:

 window.shellApp.isTabletDevice(); 

And my code works and looks beautiful on every screen size.

Answer 3

look in window.devicePixelRatio

Answer 4

I searched everything and found many solutions in half. It works on Android, iphone and the Internet. In CSS, use values ​​to scale proportionally.

 var dpi = window.devicePixelRatio || 1; var width = $(window).width(); var ratio = 52; //Ratio of target font size to screen width screenWidth/idealFontSize var font = Math.ceil((width / dpi / ratio)+dpi*3); if(font < 15) font = 15;// any less is not useable. $("html").css({"fontSize": font}); 

Update: Now I am using something closer to this. It works in more cases. The ratio varies depending on the project and orientation. And I use a class on the body tag that will change CSS.

 <body class="landscape"> <body class="portrait"> var landscapeUnitsWideThatIWantToBuildThisProjectTo = 50; var unitsWideThatIWantToBuildThisProjectTo = 30; var landscape = isLandscape(); var ratio = landscape ? landscapeUnitsWideThatIWantToBuildThisProjectTo : unitsWideThatIWantToBuildThisProjectTo; var font = Math.round(width / ratio);