javascript 兼容不同手机的 canvas

当用户设置"width=device-width"时,网页宽度等于设备宽度.设备宽度会根据缩放比率计算,比如小米1280*720,则网页宽度为720px/设备缩放比率.

meta name="viewport" content="width=device-width"

缩放比例window.devicePixelRatio:

不同的手机会根据手机密度,缩放页面.获得缩放比例使用window.devicePixelRatio.

小米手机的缩放比例为2.就是1px,会被放大为2px;

所以如果想在小米显示全屏的话则使用.720px/2为实际手机上显示的宽度

关于canvas图片全屏的兼容:

假设两个手机分辨率分别是960*640的iphone4和1280*720的小米.优先保证iphone4的全屏.

1.由于iphone4是2倍缩放,所以设计的图片大小为480*320.这样可以在iphone4下全屏显示

2.兼容小米.主要原理就是缩放canvas,改变图片的大小以便全屏.

//图片本身大小
var nativeWidth = 320,nativeHeight = 480;
//获得页面宽度
var targetWidth = getWidth(); 
//计算宽度的缩放比率,供高度和canvas使用,这里不计算高度的缩放,避免失真
var ratio = targetWidth/nativeWidth;

//设置舞台的缩放比率
stage = new createjs.Stage(pCanvas);
stage.scaleX = radio;
stage.scaleY = radio;


//获取屏幕宽度
//这里不用window.screen.availWidth,避免iphone下的错误而且安卓下,screen的width为分辨率宽度
function getWidth() {
var xWidth = null;

if (window.innerWidth !== null) {
xWidth = window.innerWidth;
} else {
xWidth = document.body.clientWidth;
}

return xWidth;
}

-----------------------------------------------

1. 像素：其实所有的画面都是由一个个的小点组成的，这一个个的小点就称之为像素。 一块方形的屏幕横向有多少个点，竖向有多少个点，相乘之后的数值就是这块屏幕的像素（数码相机的像素也是这么乘积出来的）。
2.尺寸：手机的尺寸是对角线的长度，单位是英寸
3.PPI||DPI: Dots per inch 所表示的是每英寸所拥有的像素, 图像ppi值越高，画面的细节就越丰富，因为单位面积的像素数量更多. ppi计算公式：公式表达为 PPI=√X^2+Y^2）/ Z （X：长度像素数；Y：宽度像素数；Z：屏幕尺寸大小） 比如iPhone4 的ppi计算如下： PPI=√960^2+640^2）/3.5
4.DIPs:Device-independent pixel 设备独立像素,不同设备有不同的显示效果,这个和设备硬件有关.基于屏幕密度的抽象单位，设备无关的点，用于说明与密度无关的尺寸和位置。这些单位是相对于一个160dpi的屏幕，一个dips是160dpi屏幕上的一个点。 计算公式:DIPs =(DPI/160) * pixel
5.window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (DIPs))的比例。 公式表示就是：DIPs = 物理像素 / window.devicePixelRatio 物理像素就是指实际的px像素.

-----------------------------------------------