由于一些移动端的兼容性原因，我们某个项目需要前端将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)
上面的设备独立像素
