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

发布时间：2020-12-14 21:21:23 所属栏目：资源来源：网络整理

导读：我有一个主要用于桌面大屏幕显示器的网站。在页面中，我将有各种内容部分，但我还希望在div中有一个移动应用程序区域，该区域将向用户显示移动应用程序中的项目在不同的移动电话上的外观可能有所不同。看一些手机的规格，我看到： iPhone 7(4.7英寸) – 1,33

我有一个主要用于桌面大屏幕显示器的网站。在页面中，我将有各种内容部分，但我还希望在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中。它不应该占用我的整个页面，使其看起来像一个移动应用程序。

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

解决方法

您无法使用任何Web语言(HTML / CSS / JS)设置DPI设置。
但是对于模拟，您可以将代码放在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>

也是从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设置为某种类似的设备手机外观相似

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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!