h5移动端设备像素比dpr介绍

首先介绍一下概念

　　devicePixelRatio其实指的是window.devicePixelRatio

　　window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

　　公式表示就是：window.devicePixelRatio = 物理像素 / dips

　　　好了，到了这里有出来了两个概念，物理像素和 dips

　　　　物理像素，比较好理解，一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

　　　　dips，（dip或dp或device independent pixels）指的是设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的

　　　　　　　　虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

　　　　　　　　话说回来，dips到底有什么用呢？

　　　　　　　　dip可以用来辅助区分视网膜设备还是非视网膜设备。

　　　　　　　　　　简单解释一下，视网膜设备指的是分辨率达到300ppi这个‘神奇数字’（每英寸300个像素点）

　　引用张鑫旭大神的博客内容说明一下

　　　　所有非视网膜屏幕的iphone在垂直的时候，宽度为320物理像素。当你使用<meta name="viewport" content="width=device-width">的时候，会设置视窗布局宽度（不同

　　　　于视觉区域宽度，不放大显示情况下，两者大小一致，见下图）为320px, 于是，页面很自然地覆盖在屏幕上

这样，非视网膜屏幕的iphone上，屏幕物理像素320像素，独立像素也是320像素，因此，window.devicePixelRatio等于1.

而对于视网膜屏幕的iphone，如iphone4s, 纵向显示的时候，屏幕物理像素640像素。同样，当用户设置<meta name="viewport" content="width=device-width">的时候，其视区宽度并不是640像素，而是320像素，这是为了有更好的阅读体验 – 更合适的文字大小。

这样，在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2。

　　这也就解释了为什么移动端的设计稿大小要乘以2？

　　　　因为很多设计师的移动设计稿是基于iphone6做出来的，大家都知道iphone6的dpr=2(从iphone4开始就是2了)

　　　　设计稿会给成750的，所以前端开发写的 css像素（设备独立像素）= 设备的物理像素 / 2 = 750 / 2 = 375=苹果6的屏幕宽度

　　　　　　你只需要把设计师的宽度缩小一半就好了。

　　注：本文的DIPs切勿和DPI搞混了！DPI指每英寸点的个数，本文的DIPs指设备独立像素。

转载于:https://www.cnblogs.com/mtl-key/p/7126634.html

h5移动端设备像素比dpr介绍相关推荐

1像素下边框引发移动端设备像素比的应用
实现1像素下边框,一般的处理方式为:border-bottom: 1px solid color, 这种的处理方式在PC端显示的是1px的下边框,然而放在移动端时就不是1px的大小了,可以能是2px, ...
关于设备像素比dpr的理解
做手机端项目,不可避免要寻找一个手机端页面与手机屏幕适配最佳方案.在这之前,我觉得还是要去理解一下dpr(设备像素比).我们还要了解一些与dpr相关的概念: (1)物理像素(physical pixe ...
当我们在讨论设备像素比（device pixel ratio，dpr）的时候我们在讨论什么？
目录 0. 为什么要写这篇文章? 1. 设备像素比的问题在哪里? 1.1. 不同的论述导致不同的理解 1.2. 设备独立像素与CSS像素 1.3. 小结 2. 设备像素比 = 设备物理像素/CSS像素 ...
15-移动端布局基础——DPI、PPI、物理像素、DPR、viewportcss像素、DPR
文章目录 1. DPI 和 PPI 是什么? 一.物理像素和css像素三.设备像素比DPR 四.viewport 五.viewport三理论:布局视口.视觉视口.理想视口五.利用meta标签对vi ...
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
最近看了很多这方面的文章,能搜到的基本看了个遍,但感觉还是似懂非懂,知道这个东西,很难说出这是个什么东西,先整理一些概念,慢慢消化,以后慢慢探索其中的原因. 1.PX(CSS pixels) 1.1 ...
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport（转载）
1.PX(CSS pixels) 1.1 定义虚拟像素,可以理解为"直觉"像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. ...
像素相关概念：PPI、DPI、设备像素、独立像素
前言我相信对于像素,英文「pixel」,缩写「px」,这个概念并不陌生吧,不管是设计师设计图片用的单位 px,还是前端工程师在 css 里面的单位 px等等,很多领域都会用到这个单位,但是当我问他们 ...
困扰前端的像素相关概念：PPI、DPI、设备像素、独立像素
我相信对于像素,英文「pixel」,缩写「px」,这个概念并不陌生吧,不管是设计师设计图片用的单位 px,还是前端工程师在 css 里面的单位 px等等,很多领域都会用到这个单位,但是当我问他们一些问 ...
移动端1px像素问题及解决办法
在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的移动端1px像素问题.首选先看一下,pc时代和移动 ...

h5移动端设备像素比dpr介绍

h5移动端设备像素比dpr介绍相关推荐

最新文章

热门文章