Simulating mobile resolution in a section of a webpage

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.

4 Answers

Answers 1

In none of the web languages (HTML/CSS/JS) you can not set the DPI setting. 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 either you can use the CSS zoom or even try to scale the whole page depend on your mobile phony's DPI .

.iPhone6S {    width:750px;    height:1223px;    transform-origin: 0 0;    transform:scale(0.7);     /*you can calculate it by something like : calc(320/1223)      in case you want the last result be a 320px element*/    zoom:calc(96/326*100)%;  }

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

Answers 2

Use the following procedure to simulate different displays.

1.right Click in chrome and selected inspect

2.select toggle device toolbar

3.Select the desired display

4.after select display ,push "Ctrl+F5" for refresh page

Answers 3

You can't use dpi for nothing as it's a hardware setting. you must use a viewport relation to display it at desired resolution % depending on wherever you prefere: PX or inches (calculed depending on actual viewport size that you can read with javascript).

Another nice and usually used option is to set a phone mockup with an iframe overlay that prints the content you want, here's an extracted example:

iframe {      position: absolute;      top: 0;      left: 0;      background-color: #FFF;      z-index: 5;  }

<img style="" src="http://www.mobilephoneemulator.com/images/devices/Apple-Iphone6-wm.jpg">  <iframe id="Iframe" name="Iframe" scrolling="no" frameborder="0" style="transform-origin: 0px 0px 0px; left: 30px; top: 95px; width: 375px; height: 667px; transform: scale(1);" width="375" height="667" src=""></iframe>

At the end, you want to simulate, and giving a mockup adds a valuable immersion, as you can add responsive elements on it (or fixed ones) to scale it to fit in. Emulate a mobile device is a different fact and not viable.

Answers 4

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" 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.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati