我有一个网站，该网站将主要用于桌面上的大屏幕显示器。在页面中，我将有多个内容部分，但我也想在div中有一个移动应用程序区域，该区域将向用户显示移动应用程序中的项目在不同手机上的外观可能会有所不同。查看一些手机的规格，我会看到:
显然，台式机显示器上的ppi与移动电话上的ppi不同。
模拟事物在手机上的外观和位置的最佳方法是什么？是否仅考虑长度和高度的相对比例，而忽略ppi的工作？
注意
我熟悉Chrome开发者工具。这不是我要的。移动应用部分应位于页面上的div中。它不应该占用我的整个页面并使它看起来像一个移动应用程序。
它也需要对用户透明，因此他们不必弄清楚如何使用开发人员工具。
最佳答案
您不能以任何一种网络语言(HTML / CSS / JS)设置DPI设置。
但是对于模拟，您可以将代码放入iframe甚至div中
然后将您的网站加载到iframe中，然后可以使用 CSS transform:scale()来缩放整个页面，具体取决于手机的PPI。
以see为例，例如 iPhone6s 具有750 x 1334本机分辨率(像素)，但375 x 667 UIKit大小(点)和本机比例因子为2.0 。您也可以在see中添加CSS Media Queries，以375 x 667的分辨率进行渲染，然后使用本机因子(此处为2.0)对其进行缩放，以适合设备显示(此操作之间会产生柔和的anti-aliased like effect)。
现在，以 326 ppi 来模拟屏幕，以便在我的iMac 27“2012中使用apparently 108.79 ppi (通常可以是96)在iPhone 6s (通常可以是96)上模拟另一个屏幕，我将得到最终比例因子。申请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>
也来自w3.org on orientation
如果这是我们正在讨论的通用模拟器，那么您应该考虑使用user-agent device detection，仍然可能有些站点在服务器端或客户端依赖它。因此，您需要使用
transform:scale手动获取页面，然后将XMLHTTPRequest.setRequestHeader的user-agent设置为某种类似于手机的设备我也碰到了这个站点，真的值得一提:
https://www.mydevice.io/
关于html - 在网页的一部分中模拟移动分辨率，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49121390/