[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的更多相关文章

  1. 转载:手机网页制作的认识(有关meta标签)

    下面是手机网页的一些认识: 一.<meta name="viewport" id="viewport" content="width=devic ...

  2. 手机网页调试利器: Chrome

    新开发的网页需要在手机或是模拟机上运行测试, 可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页 ...

  3. 手机网页制作的认识(有关meta标签)

    近日以来一直在看JQuery Mobile 一个手机开发框架,说实话真的很头疼的~~~~ 因为里面有很多的属性.方法和事件~~~ 下面是手机网页的一些认识: 一.<meta name=" ...

  4. css3和jquery实现的可折叠导航菜单(适合手机网页)

    之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览   源码下载 这个 ...

  5. 网页中插入外部视频的几种方法(PC与手机网页通用)

    网页中加入视频的几种方法(PC与手机网页通用) 方法一: <!doctype html> <html> <head> <meta charset=" ...

  6. 用MVC做支付宝手机网页支付问题

    支付宝支付接口手机网页支付 从官网扒下来的demo阿里做得还是相当不错的,只要参数改正确了基本上都是能跑通,WebForm的没什么大问题,这次要讲的主要是几个要注意的问题,因为是用MVC来做. 1.要 ...

  7. [书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞

    目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...

  8. 在手机网页中使用USEMAP

    因为手机网页中图片大多数使用百分比显示 所以USEMAP的坐标错位 http://files.cnblogs.com/files/jweb/jquery.rwdImageMaps.min.js < ...

  9. 在ASP.NET2.0里打印网页指定的内容(比如打印网页里的一个Table)

    原文:在ASP.NET2.0里打印网页指定的内容(比如打印网页里的一个Table) 打印指定内容: <html> <head> <script   type= " ...

随机推荐

  1. KnockoutJS 3.X API 第七章 其他技术(4) 速率限制

    注意:这个速率限制API是在Knockout 3.1.0中添加的. 通常,更改的observable立即通知其订户,以便依赖于observable的任何计算的observable或绑定都会同步更新. ...

  2. WaitType:ASYNC_IO_COMPLETION

    项目组有一个数据库备份的Job运行异常,该Job将备份数据存储到remote server上,平时5个小时就能完成的备份操作,现在运行19个小时还没有完成,backup命令的Wait type是 AS ...

  3. LINQ系列:Linq to Object分组操作符

    分组是指根据一个特定的值将序列中的值或元素进行分组.LINQ只包含一个分组操作符:GroupBy. GroupBy 1>. 原型定义 public static IQueryable<IG ...

  4. ActionScript 3.0入门:Hello World、文件读写、数据存储(SharedObject)、与JS互调

    近期项目中可能要用到Flash存取数据,并与JS互调,所以就看了一下ActionScript 3.0,现把学习结果分享一下,希望对新手有帮助. 目录 ActionScript 3.0简介 Hello ...

  5. Python标准模块--collections

    1.模块简介 collections包含了一些特殊的容器,针对Python内置的容器,例如list.dict.set和tuple,提供了另一种选择: namedtuple,可以创建包含名称的tuple ...

  6. 深入理解DOM事件类型系列第四篇——剪贴板事件

    × 目录 [1]定义 [2]对象方法 [3]应用 前面的话 剪贴板操作可能看起来不起眼,但是却十分有用,可以增强用户体验,方便用户操作.本文将详细介绍剪贴板事件 定义 剪贴板操作包括剪切(cut).复 ...

  7. CSS中div覆盖另一个div

    将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 <htm ...

  8. n维数组实现(可变参数表的使用)

    首先先介绍一下可变参数表需要用到的宏: 头文件:#include<cstdarg> void va_start( va_list arg_ptr, prev_param ); type v ...

  9. Java设计模式之模板模式(Template )

    前言: 最近学习了Glide开源图片缓存框架,在学习到通过使用ModelLoader自定义数据源的时候,Glide巧妙的使用了Java的模板模式来对外暴露处理不同的Url数据源,今天来学习总结一下模板 ...

  10. maven全局配置文件settings.xml详解

    概要 settings.xml有什么用? 如果在Eclipse中使用过Maven插件,想必会有这个经验:配置settings.xml文件的路径. settings.xml文件是干什么的,为什么要配置它 ...