html - 在网页的一部分中模拟移动分辨率

Question

我有一个网站，主要用于桌面上的大屏幕显示器。在页面中，我将有各种内容部分，但我还希望在 div 中有一个移动应用程序区域，该区域将向用户显示移动应用程序中的元素在不同手机上的外观可能有何不同。查看我看到的一些手机的规范:

• 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 中。它不应该占用我的整个页面并使它看起来像一个移动应用程序。

它还需要对用户透明，这样他们就不必弄清楚如何使用开发人员工具。

Answer 1

您不能在任何网络语言 (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 呈现，然后使用 native 因子(此处为 2.0)对其进行缩放以适合设备显示(它会导致软 anti-aliased like effect 在此操作之间发生)。

现在用 apparently 108.79 ppi 在我的 iMac 27"2012 中为 iPhone6s 模拟 326 ppi 的屏幕(通常可以是96)，我有另一个比例因子为 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

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 设置用户代理某种设备电话看起来很像

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

我还发现了这个值得一提的网站: https://www.mydevice.io/