[Cordova] 手机网页里的1px

[Cordova] 手机网页里的1px

1px的显示

Cordova让开发人员可以使用HTML页面,来开发APP的显示内容。但是在手机上,HTML页面里定义的1px,并不是直接对应到手机屏幕的一个像素。而是会依照尺寸、分辨率等等数值,计算出一个倍率值,在屏幕上做等比的显示。也就是说,HTML页面里的1px,在不同的手机上,可能会以两个屏幕像素、或是三个屏幕像素来做显示。

相关的技术细节可以参考下列资料:

Chrome开发者工具,对于手机网页1px的支持

HTML页面的调适工具,最常被人提起的应该就是Chrome开发者工具。而Chrome开发者工具,对于手机网页里的1px,提供了像素换算的功能支持。

  • 当开发人员点击F12,开启开发者工具之后,再点击页面里的Toggle device mode按钮,就可以开启仿真手机显示网页的功能。

    01

  • 在仿真手机显示网页的工具栏上,开发人员可以看到目前所仿真的手机的分辨率。这边要特别注意的是,这个分辨率是经由Chrome换算过的网页分辨率。Chrome依照手机机型、手机网页里的1px与实际显示在屏幕上的像素比率,换算出满版网页的一页长宽是多少px,来做为网页分辨率。开发人员只要使用这个网页分辨率来开发网页,在该手机机型上,就会显示的近似于在Chrome开发者工具里见到的样式。

    02

Chrome开发者工具,自定义网页分辨率

在Chrome开发者工具里,虽然提供了很多种手机机型供开发人员使用,但并无法提供所有的手机机型。当开发人员的目标手机机型,不在Chrome所提供的清单时,开发人员可以自定义网页分辨率来进行开发工作。

03

而要取得手机的网页分辨率,开发人员可以使用手机开启下列网址,该网页提供网页分辨率检测的功能。开发人员进入该网页后,可以先记下页面所显示的宽度数据,再横转手机就可以取得长度数据,这两个数据也就是该机型的网页分辨率。

参考数据

原文地址:https://www.cnblogs.com/clark159/p/5320004.html