问题点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. ArcGIS 10.3编译旧版本Addin错误的解决办法

    ArcGIS10.2下VS2010的AddIn,在10.3下在VS2012下重新编译出现missing ESRI ArcGIS Add-in SDK错误,导致无法生成esriAddIn安装文件. 该问 ...

  2. python 多线程效果演示

    多线程演示 不使用多线程的情况 import threading import time def run(n): print("task ",n) time.sleep(2) ru ...

  3. VC简单嵌入汇编

    转自:http://blog.csdn.net/arcsinsin/article/details/8126473 内嵌汇编的使用方法是: __asm {        语句 } 你可以把它插入程序中 ...

  4. 【java开发系列】—— 深克隆和浅克隆

    Java支持我们对一个对象进行克隆,通常用在装饰模式和原型模式中.那么什么是深克隆,什么是浅克隆呢. [浅克隆],通常只是对克隆的实例进行复制,但里面的其他子对象,都是共用的. [深克隆],克隆的时候 ...

  5. bind 详解

    请看我的有道云笔记: http://note.youdao.com/noteshare?id=eaf4194473cf4294776fbc263ffe6b89&sub=5CB214C594E0 ...

  6. React总结和遇到的坑

    一.react项目 前端react后端node:https://github.com/GainLoss/react-juejin 前端react后端Pyton:https://github.com/G ...

  7. vue+node+mongodb实现的功能

    用vue+node +mongodb实现前后台交互的页面代码,已经上传到github上, 地址是: https://github.com/GainLoss/vue-node-mongodb https ...

  8. C 中重载一词中的“重”字读ZHONG4还是CHONG2?

    in my opinion: overload: 重zhong4载override overwrite:覆盖,改写,重写.//csdn上有人问过,没有overwrite这个词 http://bbs.c ...

  9. Pandas使用详细教程(个人自我总结版)

    Pandas 是我最喜爱的库之一.通过带有标签的列和索引,Pandas 使我们可以以一种所有人都能理解的方式来处理数据.它可以让我们毫不费力地从诸如 csv 类型的文件中导入数据.我们可以用它快速地对 ...

  10. pip pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool

    设置超时时间: pip --default-timeout=100 install  Pillow