问题点1：iphone5分辨率：640 * 1136 dp，为什么chrome浏览器F12中显示的320 *568？？
        iPhone5 分辨率640 * 1136指的是物理像素，而实际开发中用的px是逻辑像素，
  • px : 逻辑像素，浏览器使用的抽象单位（抽象单位指根据不同设备可以变大变小）
  • dp, dt： 物理像素，与设备无关（物理像素是固定的不会改变）
  • dpr：像素比
  • ppI越高，像素越高，图像越清晰，系统默认设置缩放比越大
  • 视网膜Retina屏: dpr>=2
计算公式：1px = dpr^2 * dp 
 
 iphone5的dpr=2 即 1px = 4 * dp (x轴2个，y轴2个)
因此，640dp * 1136dp = 320px * 568px
 
问题点2：为什么iphone5的dpr等于2 ？
知识点：PPI 
计算公式：PPI = （1136^2 + 640^2）/4=326ppi (视网膜Retina屏)，根据ppi缩放比图，326属于超高dpi，所以默认缩放比为2 即dpr=2

完整换算流程如图：

Hello，移动WEB—px,dp,dpr像素基础的更多相关文章

  1. px,dp sp是像素、尺寸、尺寸

    px:即像素,1px代表屏幕上一个物理的像素点:px单位不被建议使用,因为同样100px的图片,在不同手机上显示的实际大小可能不同,如下图所示(图片来自android developer guide, ...

  2. 在Android中，px,dp,dip,sp的不同之处

           最近在学习Android开发,一直没有弄清楚px,dp,dip,sp的区别.今天正好有时间,就花时间研究了一下.     众所周知,Android厂商非常多,各种尺寸的Android手机 ...

  3. px,dp,dip,sp,in,mm,pt详细分析

    px,dp,dip,sp,in,mm,pt详细分析 px   :(pixels),屏幕的像素点,不同的设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多. dip  :(devi ...

  4. pt和px区别 pt是逻辑像素，px是物理像素

    pt和px区别 pt是逻辑像素,px是物理像素字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢?先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:pt就是po ...

  5. 产品设计教程：如何理解 px,dp,dpi, pt，看这一篇就够了

    先聊聊熟悉的几个单位 围绕着各种屏幕做设计和开发的人会碰到下面几个单位:in, pt, px, dpi,dip/dp, sp 下面先简单回顾下前四个单位: “in” inches的缩写,英寸.就是屏幕 ...

  6. Android屏幕尺寸与度量单位(px,dp,sp)简介

    MarkdownPad Document *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...

  7. Python开发【第二十一篇】：Web框架之Django【基础】

    Python开发[第二十一篇]:Web框架之Django[基础]   猛击这里:http://www.cnblogs.com/wupeiqi/articles/5237704.html Python之 ...

  8. 移动像素的px ,dp/pt,dpr的关系

    一:基础知识 px:逻辑像素,浏览器使用的抽象单位 dp,pt:设备无关像素 也叫物理像素 dpr:devicePixelRatio 设备像素缩放比 计算公式:1px=(dpr)^2*dp; ipho ...

  9. 移动端web之像素基础

    px:css pixels逻辑像素,浏览器使用的抽象单位 dp,pt :device independent pixels 设备无关像素 dpr:devicePixelRatio 设备像素缩放比 计算 ...

随机推荐

  1. 关于input 中 hidden属性在后台作用的实例

    在双模的项目中,我遇到了一个问题,我公司的双模项目是基于ECShop的框架,在完成订单列表的页面时,我写了两个form表单来单独传输数据,第一个表单是用来做搜素的,第二个表单是用来显示表单信息的,在控 ...

  2. stateless函数里面的参数问题

    UI组件文件: function Selector({ status1, status2, status3 }){ return (<div><span>demo</sp ...

  3. 分享一个好东西（一天精通MongoDB数据库）

    https://pan.baidu.com/s/1o7V5e8U 总共几个小时的视频,看了之后醍醐灌顶.分享出来.

  4. maven学习（三）maven仓库

    官网图片: maven仓库: 仓库通常配置在settings.xml文件中,此处注意settings.xml的优先级:用户 > 全局,广义上maven的仓库一共包含两种: 1.本地仓库,默认在& ...

  5. hadoop使用

    hadoop@ubuntu:~$ cd hadoop-2.0.5-alpha/ hadoop@ubuntu:~/hadoop-2.0.5-alpha$ ls hadoop@ubuntu:~/hadoo ...

  6. web中的cookie管理

    本篇是以JSP为背景介绍,但是在web开发中也是相同的原理. 什么是cookie 由于http是一种无状态的协议,因此服务器收到请求后,只会当做一次新的请求.即便你重复发送了1000次同样的请求,这1 ...

  7. C/C++ 修改控制台程序文字颜色

    可以修改前景色(字体颜色)和背景色. 示例代码如下: #include <iostream> #include <Windows.h> //需要引用Windows.h usin ...

  8. oozie调用java实例------shell action

    Oozie提供了一个方便的方式来运行任何命令.这可能是Unix命令,Perl或Python脚本,甚至java程序都可以通过Unix shell调用.shell命令运行在任意的Hadoop集群节点上,并 ...

  9. bzoj 2179 FFT

    求两个高精度的乘法. 根据高位低位,填入多项式的系数,求两个卷积,然后进位操作.

  10. 生理周期，POJ(1006)

    题目链接:http://poj.org/problem?id=1006 解题报告: 1.枚举天数的时候可以根据前面的结果直接跳过一些错误的答案. ///三个周期是23,28,33, #include ...