[Cordova] 手机网页里的1px
[Cordova] 手机网页里的1px
1px的显示
Cordova让开发人员可以使用HTML页面,来开发APP的显示内容。但是在手机上,HTML页面里定义的1px,并不是直接对应到手机屏幕的一个像素。而是会依照尺寸、分辨率等等数值,计算出一个倍率值,在屏幕上做等比的显示。也就是说,HTML页面里的1px,在不同的手机上,可能会以两个屏幕像素、或是三个屏幕像素来做显示。
相关的技术细节可以参考下列资料:
Chrome开发者工具,对于手机网页1px的支持
HTML页面的调适工具,最常被人提起的应该就是Chrome开发者工具。而Chrome开发者工具,对于手机网页里的1px,提供了像素换算的功能支持。
当开发人员点击F12,开启开发者工具之后,再点击页面里的Toggle device mode按钮,就可以开启仿真手机显示网页的功能。
在仿真手机显示网页的工具栏上,开发人员可以看到目前所仿真的手机的分辨率。这边要特别注意的是,这个分辨率是经由Chrome换算过的网页分辨率。Chrome依照手机机型、手机网页里的1px与实际显示在屏幕上的像素比率,换算出满版网页的一页长宽是多少px,来做为网页分辨率。开发人员只要使用这个网页分辨率来开发网页,在该手机机型上,就会显示的近似于在Chrome开发者工具里见到的样式。
Chrome开发者工具,自定义网页分辨率
在Chrome开发者工具里,虽然提供了很多种手机机型供开发人员使用,但并无法提供所有的手机机型。当开发人员的目标手机机型,不在Chrome所提供的清单时,开发人员可以自定义网页分辨率来进行开发工作。
而要取得手机的网页分辨率,开发人员可以使用手机开启下列网址,该网页提供网页分辨率检测的功能。开发人员进入该网页后,可以先记下页面所显示的宽度数据,再横转手机就可以取得长度数据,这两个数据也就是该机型的网页分辨率。
网页分辨率-宽度:
网页分辨率-长度:
参考数据
[Cordova] 手机网页里的1px的更多相关文章
- 转载:手机网页制作的认识(有关meta标签)
下面是手机网页的一些认识: 一.<meta name="viewport" id="viewport" content="width=devic ...
- 手机网页调试利器: Chrome
新开发的网页需要在手机或是模拟机上运行测试, 可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页 ...
- 手机网页制作的认识(有关meta标签)
近日以来一直在看JQuery Mobile 一个手机开发框架,说实话真的很头疼的~~~~ 因为里面有很多的属性.方法和事件~~~ 下面是手机网页的一些认识: 一.<meta name=" ...
- css3和jquery实现的可折叠导航菜单(适合手机网页)
之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览 源码下载 这个 ...
- 网页中插入外部视频的几种方法(PC与手机网页通用)
网页中加入视频的几种方法(PC与手机网页通用) 方法一: <!doctype html> <html> <head> <meta charset=" ...
- 用MVC做支付宝手机网页支付问题
支付宝支付接口手机网页支付 从官网扒下来的demo阿里做得还是相当不错的,只要参数改正确了基本上都是能跑通,WebForm的没什么大问题,这次要讲的主要是几个要注意的问题,因为是用MVC来做. 1.要 ...
- [书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞
目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...
- 在手机网页中使用USEMAP
因为手机网页中图片大多数使用百分比显示 所以USEMAP的坐标错位 http://files.cnblogs.com/files/jweb/jquery.rwdImageMaps.min.js < ...
- 在ASP.NET2.0里打印网页指定的内容(比如打印网页里的一个Table)
原文:在ASP.NET2.0里打印网页指定的内容(比如打印网页里的一个Table) 打印指定内容: <html> <head> <script type= " ...
随机推荐
- 《Spark快速大数据分析》—— 第三章 RDD编程
- salesforce 零基础学习(四十四)实现checkbox列表简单过滤功能
现在做的项目代码是原来其他公司做的,要在原来基础上业务进行适当调整加上一些CR,其中有一个需要调整的需求如下: 原来使用apex:selectCheckboxes封装了一个checkbox列表,因为数 ...
- 分区函数Partition By的与row_number()的用法以及与排序rank()的用法详解(获取分组(分区)中前几条记录)
partition by关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partition by用于给结果集分组,如果没有指 ...
- sun.misc.BASE64Encoder找不到jar包的解决方法
1.右键项目->属性->java bulid path->jre System Library->access rules->resolution选择accessible ...
- Sql Server系列:系统函数
1. 返回表中指定字段的长度值COL_LENGTH 返回列的定义长度(以字节为单位). 语法: COL_LENGTH ( 'table' , 'column' ) 示例: SELECT COL_LEN ...
- MVC4做网站后台:用户管理 ——用户组 2、查看、修改、删除用户组
查看用户组资料和修改用户组资料结合在一起,在用户组列表双击查看用户组资料,修改资料点保存可以保存用户组,点删除可以删除用户组. 先在UserGroupController中添加 action publ ...
- 【开源】OSharp3.3框架解说系列:开发计划与进度
OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...
- PHP过滤各种HTML标签
$str=preg_replace("/<\s*img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i&q ...
- 1Z0-053 争议题目解析346
1Z0-053 争议题目解析346 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 346.What is the impact of the results of the outp ...
- java多线程--线程池的使用
程序启动一个新线程的成本是很高的,因为涉及到要和操作系统进行交互,而使用线程池可以很好的提高性能,尤其是程序中当需要创建大量生存期很短的线程时,应该优先考虑使用线程池. 线程池的每一个线程执行完毕后, ...