距离上一篇博客已经有将近一年时间，没有写什么一个是因为一直太忙，另外一个也是不知道要写什么，还是做游戏项目，不过从手游转到了Html5游戏，继续使用Cocos2d，语言换成了JS。
不多叙旧，这次简单说下Cocos2d-JS的适配问题，上一个项目（手机QQ空间玩吧的《点点萌萌消》，欢迎试玩^_^）没有考虑分辨率适配问题，直接采用的是640*960的方式进行开发，基本上不用考虑适配问题。
当前这个项目需要考虑屏幕白边问题，今天有点闲工夫，就慢慢研究了一上午，还有点意思。说有点意思是因为NO_BORDER模式需要计算屏幕尺寸，而这也将解决屏幕适配问题。
参考http://segmentfault.com/blog/tangyunlou/1190000000635287这篇技术博客，在Cocostudio编辑器中创建一个适配层，将需要适配的部件丢到这个层中。
接着在代码中对这个适配层进行位置和大小的计算，如果依然按照这篇博客的代码写，可能不能得到想要的效果，因为Cocos2d-JS是有点不同的。
现在我们重新考虑NO_BORDER模式的原理。
代码中对NO_BORDER的解释是：Theentire application fills the specified area, without distortion but possiblywith some cropping,while maintaining the original aspect ratio of theapplication.（翻译即是：程序将是充满整个区域，做裁剪而不是变形处理，裁剪不会改变原有宽高比）
如上图所示：在iPhone4s（我目前用的）的手机上，如果说设计高宽为1280*720（设计高宽通过cc.view.setDesignResolutionSize函数设置），那么屏幕上显示的高宽到底是多少呢？而这个高宽也是我们适配层需要设置的大小。
不是960*640，也不是1280*720，是不是有点意思了。
对于NO_BORDER模式，手机屏幕大小作为摄像头的尺寸，设计高宽作为对象（舞台），那么，在这个例子中，摄像头需要做放大操作，使得屏幕高度能容纳720的像素展示。
感性的做一下放大操作，可以感知适配层大小必须为宽960.0*(720.0/640.0)和高720.0。
理性分析下，很快适配层的大小就计算出来了代码见后面的dockUI函数。
NO_BORDER适配合适分辨率差异大且UI相对独立的情况，效果算是比较理想的吧。
var _LayoutUtil = cc.Class.extend({
//UI层
dockUI: function(panelUI) {
panelUI.setAnchorPoint(0.5, 0.5);
var size = cc.view.getFrameSize();
var wsize = cc.director.getWinSize();
var rw = wsize.width/size.width;
var rh = wsize.height/size.height;
panelUI.setPosition(wsize.width/2, wsize.height/2);
if(rw > rh){
panelUI.setContentSize(cc.size(size.width*rh, size.height*rh));
}else{
panelUI.setContentSize(cc.size(size.width*rw, size.height*rw));
}
},
//锚点默认为0.5
/**
* 停靠在左边，距离左边距intervalX个像素
* @param {CCNode} node 节点
* @param {int} intervalX 边距
* @return {null} 无
*/
dockLeft: function(node, intervalX, isCenter) {
intervalX = intervalX | 0;
var parent = node.getParent();
var pos = node.getPosition();
var size = node.getContentSize();
if(isCenter){
node.setPosition(size.width / 2 + intervalX, node.getParent().getContentSize().height/2);
}else{
node.setPosition(size.width / 2 + intervalX, pos.y);
}
},
/**
* 停靠在右边，距离右边距intervalX个像素
* @param {CCNode} node 节点
* @param {int} intervalX 边距
* @return {null} 无
*/
dockRight: function(node, intervalX, isCenter) {
intervalX = intervalX | 0;
var parent = node.getParent();
var psize = parent.getContentSize();
var pos = node.getPosition();
var size = node.getContentSize();
if(isCenter){
node.setPosition(psize.width - size.width / 2 - intervalX, node.getParent().getContentSize().height/2);
}else{
node.setPosition(psize.width - size.width / 2 - intervalX, pos.y);
}
},
/**
* 停靠在上边，距离上边距intervalY个像素
* @param {CCNode} node 节点
* @param {int} intervalX 边距
* @return {null} 无
*/
dockTop: function(node, intervalY, isCenter) {
intervalY = intervalY | 0;
var parent = node.getParent();
var psize = parent.getContentSize();
var pos = node.getPosition();
var size = node.getContentSize();
if(isCenter){
node.setPosition(node.getParent().getContentSize().width/2, psize.height - size.height / 2 - intervalY);
}else{
node.setPosition(pos.x, psize.height - size.height / 2 - intervalY);
}
},
/**
* 停靠在下边，距离下边距intervalY个像素
* @param {CCNode} node 节点
* @param {int} intervalX 边距
* @return {null} 无
*/
dockBottom: function(node, intervalY, isCenter) {
intervalY = intervalY | 0;
var parent = node.getParent();
var pos = node.getPosition();
var size = node.getContentSize();
if(isCenter){
node.setPosition(node.getParent().getContentSize().width/2, size.height / 2 + intervalY);
}else{
node.setPosition(pos.x, size.height / 2 + intervalY);
}
},
/**
* 停靠在中心
* @param {CCNode} node 节点
* @return {null} 无
*/
dockCenter: function(node) {
var parent = node.getParent();
var size = parent.getContentSize();
node.setPosition(size.width / 2, size.height / 2);
},
});
var LayoutUtil = new _LayoutUtil();原文地址：http://blog.csdn.net/xiadasong007/article/details/44463225
