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端运行时也不会出现不适配屏幕的情况！

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