Chrome Density
Question Is there a safe way to get the actually correct screen physical dimensions in Chrome, on Android? If necessary, old versions of Chrome and Android can be left out of scope. Prior research There are numerous dead-end questions on stackoverflow about getting the actual physical screen dimensions of a device from within javascript (or css). It seems there is no convergence between html api standardization and actual browser implementations in that, not to mention the browser implementation relies on OS api's which in turn rely on hardware providing the right information.
In this family, the only unforgivable thing is to write a lousy song. Fight night champion keygen manager.
Some prior answers by the way are arcane (year 2011 and the like) in assuming a certain pixel density that prevailed at that time, and therefore useless. Others relate to webkit but Chrome blink superseded webkit in chrome (?). I would like to explore the existence of a simple solution by constraining things to only Chrome on Android. Note This is all about a javascript (or css) solution inside the browser, not a solution for a native app. You can't really get the real physical dimensions or the actual DPI and even if you could, you can't do anything with them. This is a pretty long and complex story, so forgive me.
The web and all browsers define 1px as a unit called a CSS pixel. A CSS pixel is not a real pixel, rather a unit that is deemed to be 1/96th of an inch based on the viewing angle of the device. This is specified as a. The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.
For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch). In 0.26mm of space we might have very many real device pixels.
The browser does this mainly for legacy reasons - most monitors were 96dpi when the web was born - but also for consistency, in the 'old days' a 22px button on a 15 inch screen at 800x600 would be twice the size of a 22px button on a 15 inch monitor at 1600x1200. In this case the DPI of the screen is actually 2x (twice the resolution horizontally but in the same physical space). This is a bad situation for the web and apps, so most operating systems devised many ways to abstract pixel values in to device independent units (DIPS on Android, PT on iOS and the CSS Pixel on the web). The iPhone Safari browser was the first (to my knowledge) to introduce the concept of a viewport. This was created to enable full desktop style applications to render on a small screen. The viewport was defined to be 960px wide. This essentially zoomed the page out 3x (iphone was originally 320px) so 1 CSS pixel is 1/3rd of a physical pixel.
When you defined a viewport though you could get this device to match 1 CSS pixel = 1 real pixel at 163dpi. By using a viewport where the width is 'device-width' frees you up from having to set the width of the viewport on a per device basis to the optimal CSS pixel size, the browser just does it for you.
With the introduction of double DPI devices, mobile phone manufacturers didn't want mobile pages to appear 50% smaller so they introduced a concept called devicePixelRatio (first on mobile webkit I believe), this lets them keep 1 CSS pixel to be roughly 1/96th of an inch but let you understand that your assets such as images might need to be twice the size. If you look at the iPhone series all of their devices say the width of the screen in even though we know this is not true. Therefore if you made a button to be 22px in CSS space, the representation on the physical screen is 22. device pixel ratio. Actually I say this, it is not exactly this because the device pixel ratio is never exact either, phone manufacturers set it to a nice number like 2.0, 3.0 rather than 2.918. In summary, CSS pixels are device independent and let us not have to worry about physical sizes of the screens and the display densities etc.
The moral of the story is: Don't worry about understanding the physical pixel size of the screen. You don't need it. 50px should look roughly the same across all mobile devices it might vary a little, but the CSS Pixel is our device independent way to build consistent documents and UI's Resources:. @kinland Very good explanation. I wanted to also point out that though devices 'should' and in general do make 50px look roughly the same size, there are some that don't. I'm working on a project who's users often will view the site with a Lenovo Helix. This device makes everything very physically small, cramming a full HD sized viewport into a small space.
This makes everything physically smaller compared to most other devices/monitors. And unfortunately there's no way (from what I can tell) to make things bigger for the poor users that have to interact with the UI, other than a browser zoom. – Jun 18 '14 at 15:56. Based on Matt's answer, I made a test: // on Macbook Pro Retina (2880x1800, 15.4'), is the calculated diagonal size // approximately 15.4? Var svgEl = document.createElementNS('svg'); var screenWidthMillimeters = svgEl.screenPixelToMillimeterX. 2880; var screenHeightMillimeters = svgEl.screenPixelToMillimeterY. 1800; var screenDiagonalMillimeters = Math.sqrt(Math.pow(screenWidthMillimeters, 2) + Math.pow(screenHeightMillimeters, 2)); // pythagorean theorem var screenDiagonalInches = (screenDiagonalMillimeters / 10 / 2.54); // (mm / 10mm/cm) / 2.54cm/in = in console.log('The calculated diagonal of the screen is '+screenDiagonalInches+' inches.
Chrome Destiny Extension
NIs that close to the actual 15.4 '?' ); This is the output: The calculated diagonal of the screen is 8560738 inches.
Is that close to the actual value of 15.4? So there seems to be no way to get real physical values in a web browser yet. You can get that info with WURFL: The attributes are called: resolution(width height) physicaldisplay(width height) Long version: The best and most reliant strategy to achieve this is to send the user agent string from the browser to a DB like WURFL (or another) up to date DB that can provide the needed information. This is a piece of information that all modern browsers can provide; it exposes information about the device and it's OS. It is just not meaningful enough to your application without the help of a dictionary like WURFL.
Chromoly Density
This is a database commonly used to detect device properties. With it, you may be able to accurately support most of the popular devices on the market. I would post a code demo but one is available with the download on the WURFL site. You can find such a demo on the examples/demo folder that is downloaded with the library. Here is more information and explanation about checking the physical size and resolution.
W3C site says: 'In the past, CSS required that implementations display absolute units correctly even on computer screens. But as the number of incorrect implementations outnumbered correct ones and the situation didn't seem to improve, CSS abandoned that requirement in 2011. Currently, absolute units must work correctly only on printed output and on high-resolution devices. CSS doesn't define what “high resolution” means. But as low-end printers nowadays start at 300 dpi and high-end screens are at 200 dpi, the cut-off is probably somewhere in between.' – Apr 2 '15 at 11:59. I tackled this problem with one of my web projects The answer is that you can't know for certain what the physical size is, but you can get an approximation.
Using JS and / or CSS, you can find the width and height of the viewport / screen, and the pixel density using media queries. For example: iPhone 5 (326 ppi) = 320px by 568px and a 2.0 pixel density, while a Samsung Galaxy S4 (441ppi) = 360px x 640px and a 3.0 pixel density. Effectively a 1.0 pixel density is around 150 ppi.
Given this, I set my CSS to show 1 column when the width is less than 284px, regardless of pixel density; then two columns between 284px and 568px; then 3 columns above 852px. It's much more simple then it seems, since the browsers now do the pixel density calculations automatically.