cocos2d-js 系列［1］ 屏幕的适配

屏幕适配方案，官方提供的模式有以下五种：

cc.ResolutionPolicy = {
// The entire application is visible in the specified area without trying to preserve the original aspect ratio.
// Distortion can occur, and the application may appear stretched or compressed.
EXACT_FIT:0,
// The entire application fills the specified area, without distortion but possibly with some cropping,
// while maintaining the original aspect ratio of the application.
NO_BORDER:1,
// The entire application is visible in the specified area without distortion while maintaining the original
// aspect ratio of the application. Borders can appear on two sides of the application.
SHOW_ALL:2,
// The application takes the height of the design resolution size and modifies the width of the internal
// canvas so that it fits the aspect ratio of the device
// no distortion will occur however you must make sure your application works on different
// aspect ratios
FIXED_HEIGHT:3,
// The application takes the width of the design resolution size and modifies the height of the internal
// canvas so that it fits the aspect ratio of the device
// no distortion will occur however you must make sure your application works on different
// aspect ratios
FIXED_WIDTH:4,

UNKNOWN:5
};

这里根据我自己的开发经验只介绍两个模式：FIXED_HEIGHT、FIXED_WIDTH这两个模式其实是一种模式，只是一个是限制高度，另一个是限制宽度！

// 在浏览器上暂时关闭自动全屏，方便Debug。
cc.view.enableAutoFullScreen(false);
// 通过真实的，使视网膜显示，默认情况下禁用，以提高性能

cc.view.enableRetina(false);

// Adjust viewport meta

cc.view.adjustViewPort(true);

// 关键点，判断是否是手机浏览器模式，还是PC浏览器模式
if(cc.sys.isMobile){    

//设置设计分辨率大小与适配模式

cc.view.setDesignResolutionSize(720, 1280, cc.ResolutionPolicy.FIXED_WIDTH);

//设置是否跟随浏览器窗口变化    

   cc.view.resizeWithBrowserSize(true);

//设置全局缩放参数 限制宽度模式(cc.ResolutionPolicy.FIXED_WIDTH) 

//计算公式: 设计宽度(720.0)/设备宽度(cc.director.getWinSize().width)

cc.director.setContentScaleFactor(720.0 / cc.director.getWinSize().width);

} else {

//设置设计分辨率大小与适配模式

cc.view.setDesignResolutionSize(720, 1280, cc.ResolutionPolicy.FIXED_HEIGHT);
//设置是否跟随浏览器窗口变化
cc.view.resizeWithBrowserSize(true);

//设置全局缩放参数 限制高度模式(cc.ResolutionPolicy.FIXED_HEIGHT) 

//计算公式: 设计高度(1280.0)/设备高度(cc.director.getWinSize().height)
cc.director.setContentScaleFactor(1280.0 / cc.director.getWinSize().height);
}
//帧频显示

cc.director.setDisplayStats(true);

上述代码中的720*1280 是页面设计稿的分辨率！需要根据实际情况进行调整！

如此Cocos2d-js所开发出来的项目可以适配所有手机的分辨率，并且在PC端运行时也不会出现不适配屏幕的情况！

其他的几种模式，经过实际的项目测试，是不适合所有屏幕的适配方案！