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/