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

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 */
}

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/