在ios系统中每一个控件在屏幕中都通过坐标轴定位具体位置，但是这个坐标轴的范围不是根据物理像素点标记，而是通过逻辑像素标记； 逻辑像素就是不管屏幕尺寸，只需按照固定的逻辑像素定位坐标轴中控件的位置； 例如，iphone4，屏幕尺寸3.5，物理分辨率320x480,iphone5,4寸，物理分辨率640x1136; 进行页面布局时，需要判断是哪种屏幕，然后按照逻辑像素布局，iphone4逻辑像素是320x480,iphone5逻辑像素是320x568；
像素(px)是设计师的最小设计单位，点(pt)是iOS最小的开发单位。 我们日常所说的二倍图，三倍图就是指屏幕中一个点中有两个像素或三个像素。 一个设备究竟要使用二倍图还是三倍图，只需看ppi和dpi的比值就可以了。(ps:plus中ppi/dpi=2.6，约等于3) 在iOS给的设计规范中我们经常会看到44，88这些数字。那么44是怎么来的呢？其实iOS推荐的最小可点击元素的尺寸是44*44 px。 iPhone1为例，因为这个设计规范提出来的时候，苹果还没有适应retina屏,iPhone4的时候才开始采用retina屏。 当时的屏幕ppi是163px。屏幕中可点击的物理尺寸是7mm-9mm。我们以7mm来算，一英寸长度里有163像素，一英寸有25.4mm，那么7mm里应该有多少像素呢？ 1inch=163px,1 inch=25.4mm,屏幕最小可点击区域=7X163/25.4=44.9px;44px只是相对长度，随着屏幕的ppi改变而改变；
- 设计师作图用的分辨率是物理像素，或者说分辨率=物理像素；单位px;
- 逻辑像素，ios单位pt,android单位dp;开发必须将设计提供的物理像素转化为逻辑像素，通过逻辑像素控制显示内容；
-
调低电脑显示器的分辨率时，图形会变大，显示的内容也会相应减少；因为每个设备的物理像素固定不变，调节显示器的分辨率其实是在改变逻辑像素;
- 在浏览器的window变量中有一个devicePixelRatio的属性，该属性决定了浏览器会用几个（通常是2个）像素点来渲染1个像素，举例来说，假设devicePixelRatio的值为2，一张100x100像素大小的图片，在retina屏幕下，会用2个像素点的宽度去渲染图片的1个像素点， 因此该图片在retina屏幕上实际会占据200x200像素的空间，相当于图片被放大了一倍，因此图片会变得模糊。
因此我们的解决方案时：更加屏幕像素比devicePixelRatio的小同比方法canvas
如下面代码 //兼容高清屏幕，canvas画布像素也要相应改变 var c = document.getElementById(“canvas”); //获取devicePixelRatio var DPR = window.devicePixelRatio;画布宽高 //同比设置画板宽高 c.width = = canvasWidth * DPR; c.height = canvasHeight * DPR;