由于一些移动端的兼容性原因，我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决，我们采用了pdf.js这个插件，该插件可以将pdf转换成canvas绘制在页面上。不过，在测试过程中却发现，在移动端的浏览器上， 绘制的内容展示十分模糊（如下图），经过分析之后发现是由于移动端高清屏幕引起的。 在解决问题之后以文字方式记述原因和探究结果
在解释问题之前，首先需要了解一些移动端显示和cavans的小知识，方便后面探究。如果想直接看结果的话看可以拉到最后。
关于屏幕的一些基础知识
物理像素（DP）
物理像素也称设备像素，我们常听到的手机的分辨率及为物理像素，比如 iPhone 7的物理分辨率为750 * 1334。屏幕是由像素点组成的，也就是说屏幕的水平方向有750的像素点，垂直方向上有1334个像素点
设备独立像素（DIP）
也称为逻辑像素，比如Iphone4和Iphone3GS的尺寸都是3.5寸，iphone4的物理分辨率是640 * 980，而3gs只有320 * 480，假如我们按照真实布局取绘制一个320px宽度的图像时，在iphone4上只有一半有内容，剩下的一半则是一片空白，为了避免这种问题，我们引入了逻辑像素，将两种手机的逻辑像素都设置为320px，方便绘制
设备像素比（DPR）
上面的设备独立像素说到底是为了方便计算，我们统一了设备的逻辑像素，但是每个逻辑像素所代表的物理像素却不是确定的，为了确定在未缩放情况下，物理像素和逻辑像素的关系，我们引入了设备像素比(DPR)这个概念
设备像素比 = 设备像素 / 逻辑像素
DPR = DP / DIP上面说了很多理论，下面附个图解释一下
从上面的图可以看出，在同样大小的逻辑像素下，高清屏所具有的物理像素更多。普通屏幕下，1个逻辑像素对应1个物理像素，而在dpr = 2的高清屏幕下，1个逻辑像素由4个物理像素组成。这也是为什么高清屏更加细腻的原因。
关于canvas的一些基础知识
canvas绘制的是位图
这是一个所有了解过canvas的人都应该知道的知识点，也是接下来我们将要分析问题的核心。
关于位图的解释我们放在后面，现在我们只要知道canvas绘制的图像是位图。
canvas的width和height属性
canvas的width和height属性是初学者非常容易搞错的内容。这两个属性经常会与css中的width和height属性混淆。
