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

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

您无法使用任何Web语言(HTML/CSS/JS)设置DPI设置.但是对于模拟,您可以将代码放在iframe甚至div中,然后在iframe中加载您的网站,然后您可以使用CSS transform:scale()来扩展整个页面,具体取决于您的手机的PPI.

正如您所看到的,例如iPhone6s具有750 x 1334 原始分辨率(像素)但375 x 667 UIKit大小(点)和本机比例因子2.0.您也可以在CSS媒体查询中看到,它渲染为375 x 667,然后使用原生因子(此处为2.0)进行缩放以适合设备显示(它会导致在此操作之间发生柔和的抗锯齿效果).

而现在,模拟屏,326 PPI的iPhone6s在我的iMac 27" 2012年显然 108.79 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的定位

当'height'媒体特征的值大于或等于'width'媒体特征的值时,'orientation'媒体特征是'portrait'.否则'方向'是'风景'.

如果这是我们正在讨论的通用模拟器,那么您应该考虑用户代理设备检测,某些站点仍然可能在服务器或客户端依赖它.那么你需要手动获取页面XMLHTTPRequest,然后使用XMLHTTPRequest.setRequestHeader将user-agent设置为某种类似的设备手机外观

这是一个示例iPhone6s用户代理字符串:

Mozilla/5.0(iPhone; CPU iPhone OS 6_1_3,如Mac OS X)AppleWebKit/536.26(KHTML,类似Gecko)版本/ 6.0 Mobile/10B329 Safari/8536.25

我也偶然发现这个网站真的值得一提:https: //www.mydevice.io/

Answer 2

使用以下过程模拟不同的显示.

1.right单击chrome并选择inspect

2.选择切换设备工具栏

3.选择所需的显示

4.在选择显示后,按"Ctrl + F5"进入刷新页面

Answer 3

我只熟悉网络应用程序,所以答案将集中于此.

与屏幕尺寸相关的应用样式通常取决于:

1. 设备的宽高比.
2. 由于媒体查询或javascript中设置的样式属性,设备报告的屏幕宽度/高度.请注意,在移动设备上,通常这不是实际分辨率,而是分辨率除以所谓的" devicePixelRatio ".

要从应用程序的角度模拟移动设备,我们可以:

1. 设置容器与特定移动设备的比率.这将移动/调整应用程序的元素,就像调整窗口大小一样,或者就像移动设备的小屏幕一样.
2. 将应用程序加载到<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

"App"有一些固定大小的框和一个@media screen and (min-width:360px)媒体查询,使屏幕上的背景蓝色大于360px.这说明了不同屏幕中布局和媒体查询的不同之处.