Simulating device screen on web page

Question

I'm creating a web app that generates and serves web pages for mobile devices. For instance, the user configures which data to show and uses a velocity template to generate the final HTML/CSS/JS files. When the template and the information to include is configured, the clients connect to the server to show the generated pages.

However, I'm now creating a preview screen for this. So, let's say, I want to see how it will looks like on a, let's say, Nexus 5.

My goal is to create something like Google has on Chrome - the mobile device emulation. The problem is that I'm not being able to understand how they are able to do that kind of emulation.

It is true that the content must be zoomed out in order to show everything. This is pretty easy to understand as if the screen is not big enough we need to make it fit.

So, I know the device's screen diagonal size, it's resolution and PPI (points por inch). What I need to know is how to get some proper measurements for my web site to emulate the device. When I go to the Chrome emulation tool I see that the Nexus 5 is shown as:

• Resolution 360 x 640
• Pixel aspect ratio 3

I know how they calculate the Pixel aspect ratio: it's the device's PPI divided by 160 (base PPI). So, 445 / 160 = ~3 (445 is the pixel density of Nexus 5). That is how they got to the 360 x 640: they divide the resolution by the pixel aspect ratio (3).

On my web site I have an iframe and load the generated page into it. Then I know I must apply a zoom level. And this is where the problem is at. I don't really know which value of the zooming should be.

One of the attempts was

1 / ((screensize diagonal)/Pixel aspect ratio) = 1 / (4.95/3) = 0.6060(60)

Applying this zoom makes it look fine. If I follow the same approach with an Amazon Kindle HDX it also works.

However if I go with the LG L70 I get the following:

1 / (4.5/1.25) = 0.27777777...

The problem is that applying this zoom things will be a LOT smaller (because of so much zoom out) compared to Nexus 5 and, in Chrome emulation mode, they seem so alike.

Please let me know if there's any information left that could help solving this puzzle.

Answer 1

A pixel aspect ratio determines the ratio between width and height, a measure of how "square" pixels are on a device.

However, Google lets you customise the device pixel ratio. This measures how many device pixels map onto a single logical pixel (1px in css).

I believe the device pixel ratio is what counts to make various screen sizes appear the same size.

Density calculations that use the device pixel ratio to compute effective zoom can be computed in one dimension, there's no need to use a diagonal measurement.

To calculate effective css_width on the desktop from a tablet:

desktop_pixels = tablet_pixels * (desktop_ppi / tablet_ppi) (1)

tablet_pixels = tablet_css_width * tablet_pixel_density

desktop_pixels = desktop_css_width * desktop_pixel_density

into (1)

desktop_css_width * desktop_pixel_density = tablet_css_width * tablet_pixel_density * (desktop_ppi / tablet_ppi)

rearrange

desktop_css_width = tablet_css_width * (tablet_pixel_density / desktop_pixel_density) * (desktop_ppi / tablet_ppi)

The logical zoom factor is desktop_css_width / tablet_css_width

zoom_factor = (tablet_pixel_density / desktop_pixel_density) * (desktop_ppi / tablet_ppi)