Simulating mobile resolution in a section of a webpage

Question

I have a website that will mainly be used for large screen monitors on the desktop. Within the page I will have various content sections, but I also want to have a mobile app area within a div that will display to the user how items in a mobile app might look differently on different mobile phones. Looking at specs of some phones I see:

• iPhone 7 (4.7 inch) - 1,334 x 750 pixels (326 ppi)
• iPhone 7 (5.5 inch) - 1,920 x 1080 pixels (401 ppi)
• Samsung Galaxy S7 - 2,560 x 1440 pixels (577 ppi)

Obviously, the ppi is different on a desktop display than for a mobile phone.

What would be the best way to simulate how things would look and be positioned on a mobile phone? Would just taking the relative ratio of length and height and ignoring the ppi work?

Note

I am familiar with Chrome Developer Tools. This is not what I am asking for. The mobile app section should be in a div on the page. It should not be taking my entire page and making that look like a mobile app.

It also needs to be something transparent to the user so they do not have to figure out how to use a developer tool.

Answer 1

You cannot set the DPI settings in any of the web languages (HTML/CSS/JS). But as for simulation, you can put the code in an iframe or even a div then load your website inside the iframe and then you can use the CSS transform:scale() to scale the whole page depend on your mobile phone's PPI .

As you see for example iPhone6s has 750 x 1334 Native Resolution (Pixels) but 375 x 667 UIKit Size (Points) and the Native Scale factor of 2.0. You can see in CSS Media Queries too, it renders at 375 x 667 and then scales it with native factor (here 2.0) to fit to device display (it causes a soft anti-aliased like effect to happen in between this operation).

And now to simulate screen with 326 ppi for iPhone6s in my iMac 27" 2012 with apparently 108.79 ppi (normally can be 96), I have another scale with factor of 108.79/326. So the final scale factor that we would apply with transform:scale is:

with iframe of 375 x 667 pixels size  108.79/326 * 2.0 = 0.667 : as scale factor 

so :

.iPhone6S {   /* this is the render are dimension */   /* media queries look up to this */   width:375px;   height:667px;   transform-origin: 0 0;   transform:scale(0.67);    /* you can calculate it by something like :       108/326*2 = 0.663 => 0.67*/   /* zoom:...; */ /* This is non-standard feature */                   /* FireFox and Opera don't support it */ } 

<iframe src="https://www.w3schools.com/" class="iPhone6S"></iframe> 

Also from w3.org on orientation

The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

If this is a general simulator we are talking about, then you should consider user-agent device detection, that still may some sites rely on it either in server or client side. So then you'll need to fetch the page manually using XMLHTTPRequest and then set user-agent with XMLHTTPRequest.setRequestHeader to some sort of device phone look alike

Here an example iPhone6s user-agent string :

Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B329 Safari/8536.25

Also I came across this site that really worth to mention : https://www.mydevice.io/

Answer 2

I'm only familiar with web apps, so the answer will focus on that.

Screen size related app styling is typically dependent on:

1. The width / height ratio of device.
2. Screen width / height reported by the device due to styling properties set in media queries or via javascript. Note that on mobile devices, typically this is not the actual resolution, but the resolution divided by what is called "devicePixelRatio".

To emulate a mobile device from the perspective of an app, we then can:

1. Set the ratio of a container to the ratio of a certain mobile device. This will move / resize the elements of an app just the same way as resizing a window will, or, just as a small screen of a mobile would.
2. Load the app in an <iframe> element with a width / height set at resolution / devicePixelRatio, so that the width of an iframe will fool the media queries, and custom styling for smaller screens will take effect.

This will take care of the app working "right", but the iframe elements will then look quite too big compared to a real mobile device on a typical computer screen.

This is, however, dependend on the resolution and physical size of a the computer screen (and we can't know the physical size or dpi programatically, only guess or make the user measure). This means we will not be able get an "actual size" device on a computer screen, just an educated guess.

To help with the "too big" problem, we can't just resize the iframe, since then the media queries will stop working right. We hence must scale the iframe with a css transform to a more reasonable size. The scaling factor can then be adapted for different computer screen resolutions .

The concept is illustrated in the following jsfiddle: https://codepen.io/Kasparas/pen/mxPOyY

The "App" that the emulators are showing is hosted at: https://kasparasanusauskas.github.io/stackoverflow-demos/demo-app-responsive/index.html

The "App" has a few fixed size boxes and a @media screen and (min-width:360px) media query that makes the background blue on screens larger than 360px. This illustrates the difference of layout and media queries in different screens.