[Cordova] 手机网页里的1px

[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开发者工具里见到的样式。

  

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

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

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

• 取得网页分辨率 - 可乐橙的私房demo

• 网页分辨率-宽度:

  

• 网页分辨率-长度:

  

参考数据

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