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 ap

Answer 1

In the past when I have had to test this I have just resized my browser after adding the custom maxwidth / maxheight properties to my CSS. Once you hit these boundaries your relevant CSS will kick in.

Answer 2

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 3

You can't use dpi for anything 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.

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

Answer 5

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

Answer 6

My understanding is that you want to allow a user to interact with a section of your webpage. The user may change the section's width and height via buttons for each device or something. The section will response like a responsive page.

In the past, I have set up an iframe that points to another page on the same domain. Changing the iframe's size should simulate a device.