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.