我有一个主要用于桌面大屏幕的网站。网页内将有多个内容区域，但我也想在一个div区域内添加一个移动应用程序区域，向用户展示不同手机上移动应用程序的外观差异。查看一些手机规格，列举如下：
显然，对于桌面显示器和移动电话，ppi是不同的。
如何模拟移动电话上的外观和位置最好呢？只使用长度和高度的相对比例，忽略ppi是否可行？
注意：
我熟悉Chrome开发者工具。这不是我的问题所在。移动应用程序区域应该在页面的一个div区域内。它不应该获取整个页面并使其看起来像一个移动应用程序。
它还需要对用户透明，使其不必想方设法使用开发工具。
例如，如您所见, iPhone6s 的 750 x 1334 本地分辨率（像素） 但 375 x 667 UIKit 大小（点数） 和 本地比例因子为2.0。您也可以在 CSS 媒体查询 中看到，它在 375 x 667 上呈现，然后使用本地因子（这里是2.0）进行缩放以适应设备显示（这会导致在此操作之间发生柔和的抗锯齿效果）。
现在我想在我的iMac 27" 2012上使用分辨率为326 ppi的屏幕模拟iPhone6s，而该设备的像素密度通常为96，但显然它是108.79 ppi。因此，我们需要使用比例尺来缩放，这个比例尺的因子是108.79/326。所以最终我们应用于transform:scale的比例尺因子为：
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也提供了相关信息。
当“height”媒体特性的值大于或等于“width”媒体特性的值时，“orientation”媒体特性为“portrait”。否则，“orientation”为“landscape”。
如果我们谈论的是一般的模拟器，那么您应该考虑user-agent device detection，因为某些网站仍然依赖它，无论是在服务器端还是客户端。因此，您需要使用XMLHTTPRequest手动获取页面，然后使用XMLHTTPRequest.setRequestHeader设置用户代理为某种类似于手机的设备外观。
这里是一个iPhone6s用户代理字符串的示例：
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/
我只熟悉Web应用程序，所以答案将专注于此。
屏幕大小相关的应用程序样式通常取决于：
为了从应用程序的角度模拟移动设备，我们可以：
<iframe>元素中加载应用程序，并将其宽度/高度设置为resolution/devicePixelRatio，以便iframe的宽度欺骗媒体查询，并且更适合较小屏幕的自定义样式会生效。这将照顾应用程序的运作，“正确”，但是iframe元素将看起来比典型计算机屏幕上的真实移动设备要大得多。
但是，这取决于计算机屏幕的分辨率和物理大小（我们不能以程序方式知道物理大小或dpi，只能猜测或让用户测量）。这意味着我们将无法在计算机屏幕上获得“实际尺寸”设备，只能进行教育猜测。
为了解决“太大”的问题，我们不能只调整iframe的大小，因为这样媒体查询将停止运作。因此，我们必须使用css变换来缩放iframe到更合理的大小。然后可以根据不同计算机屏幕分辨率调整缩放因子。
此概念在以下jsfiddle中说明：https://codepen.io/Kasparas/pen/mxPOyY
模拟器显示的“应用程序”托管在： https://kasparasanusauskas.github.io/stackoverflow-demos/demo-app-responsive/index.html
“应用程序”具有一些固定大小的框和一个@media screen and (min-width:360px)媒体查询，该媒体查询使屏幕大于360px的背景变蓝。这说明了不同屏幕的布局和媒体查询之间的差异。
过去，当我需要测试这个功能时，我只是在添加自定义maxwidth / maxheight属性到我的CSS后调整浏览器大小。一旦达到这些界限，相关的CSS就会生效。
我理解您想让用户与网页的某个部分进行交互。用户可以通过每个设备的按钮或其他方式更改该部分的宽度和高度。该部分将像一个响应式页面一样响应。
过去，我设置了一个指向同一域上另一页的 iframe。更改 iframe 的大小应该能够模拟设备。
使用以下步骤模拟不同的显示器。
1.在 Chrome 中右键单击并选择检查。
4.在选择显示后，按下"Ctrl+F5"以刷新页面。
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>