> iPhone 7(4.7英寸) – 1,334 x 750像素(326 ppi)
> iPhone 7(5.5英寸) – 1,920 x 1080像素(401 ppi)
>三星Galaxy S7 – 2,560 x 1440像素(577 ppi)
显然，桌面显示器上的ppi与手机不同。
什么是模拟手机外观和定位方式的最佳方法？只考虑长度和高度的相对比例而忽略ppi工作？
注意
我熟悉Chrome开发者工具。这不是我要求的。移动应用程序部分应位于页面上的div中。它不应该占用我的整个页面，使其看起来像一个移动应用程序。
它还需要对用户透明，这样他们就不必弄清楚如何使用开发人员工具。
解决方法
但是对于模拟，您可以将代码放在iframe甚至div中
然后在iframe中加载您的网站，然后您可以使用CSS转换：scale()来扩展整个页面，具体取决于您手机的PPI。
正如see所示，iPhone6s具有750 x 1334原始分辨率(像素)但375 x 667 UIKit尺寸(点)和原始比例因子2.0。您也可以在CSS Media Queries see，它渲染为375 x 667，然后使用原生因子(此处为2.0)进行缩放以适合设备显示(它会导致软件anti-aliased like effect在此操作之间发生)。
现在要在我的iMac 27“2012和apparently 108.79 ppi(通常可以是96)中模拟iPhone6s的326 ppi屏幕，我有另一个因子为108.79 / 326的比例。所以我们将应用转换的最终比例因子：规模是：
with iframe of 375 x 667 pixels size 108.79/326 * 2.0 = 0.667 : as scale factor
所以：
.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>
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’.
如果这是我们正在谈论的通用模拟器，那么你应该考虑user-agent device detection，仍然可能有些网站在服务器或客户端依赖它。那么你需要使用XMLHTTPRequest手动获取页面，然后将用户代理与XMLHTTPRequest.setRequestHeader设置为某种类似的设备手机外观相似
07008 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
我也偶然发现这个网站真的值得一提：
https://www.mydevice.io/
