[Cordova] 手机网页里的1px

1px的显示

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

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

移动端尺寸基础知识 - 可乐橙的私房demo

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

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

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