修改CocosCreator浏览器预览网页

游戏开发中需要做一些屏幕适配，最快的调试方式就是在浏览器中预览调节，但是，CocosCreator的浏览器预览提供的屏幕尺寸不太够，需要添加一些尺寸，再就是，一些大的屏幕尺寸屏幕上是不能完全显示的，所以，添加了canvas缩放的功能。

苹果上的修改方案

1. 预览网页所在的路径: /Applications/CocosCreator2.09.app/Contents/Resources/static/preview-templates
2. 添加新的屏幕尺寸 boot.js 找到下面的代码，直接往数组里添加就好了。

    // init device resolutions
    var devices = [
        { name: 'Apple iPad', width: 1024, height: 768, ratio: 2 },
        { name: 'Apple iPad Mini', width: 1024, height: 768, ratio: 1 },
        { name: 'Apple iPhone 4', width: 320, height: 480, ratio: 2 },
        { name: 'Apple iPhone 5', width: 320, height: 568, ratio: 2 },
        { name: 'Apple iPhone 6', width: 375, height: 667, ratio: 2 },
        { name: 'Apple iPhone 6 Plus', width: 414, height: 736, ratio: 3 },
        { name: 'Huawei P9', width: 540, height: 960, ratio: 2},
        { name: 'Huawei Mate9 Pro', width: 720, height: 1280, ratio: 2},
        { name: 'Goolge Nexus 4', width: 384, height: 640, ratio: 2 },
        { name: 'Goolge Nexus 5', width: 360, height: 640, ratio: 3 },
        { name: 'Goolge Nexus 6', width: 412, height: 732, ratio: 3.5 },
        { name: 'Goolge Nexus 7', width: 960, height: 600, ratio: 2 },
        { name: '二比一', width: 400, height: 800, ratio: 2 },
    ];
   

3. 添加ScaleMode 1) toolbar.jade 添加下面的代码，需要的话可以自己再加新的

   span.item(style='font-size: small;') Scale Mode:
   div.item
    select#opts-scale-mode
      option(value='0') 1.0 
      option(value='1') 0.8 
      option(value='2') 0.5 
      option(value='3') 1.5 
      option(value='4') 2.0
   

   boot.js 添加代码:

    var optScaleMode = document.getElementById('opts-scale-mode');
    function getScale(){
        console.log('getScaleMode==>',optScaleMode.value);
        var idx = parseInt(optScaleMode.value);
        var select_values = [1.0, 0.8, 0.5, 1.5, 2.0];
        if(idx < 0 || idx >= select_values.length) return 1.0;
        return select_values[idx];
    }
    // init options
    // 修改这个方法
    function initPreviewOptions () {
        var defaultDevice = getCookie('device');
        var defaultRotate = getCookie('rotate');
   
        var hasDefaultDevice = defaultDevice !== null;
        var hasDefaultRotate = defaultRotate !== null;
   
        if (hasDefaultDevice) {
            optsDevice.value = parseInt(defaultDevice);
        }
   
        if (hasDefaultRotate && defaultRotate === 'true') {
            rotated = !rotated;
            setCSSChecked(btnRotate, rotated);
        }
   
        optsDebugMode.value = getCookie('debugMode') || '1';
        setCSSChecked(btnShowFPS, getCookie('showFPS') === 'true');
        inputSetFPS.value = '60';
        // 添加了这行代码
        optScaleMode.value = getCookie('scaleMode') || 1;
   
        showSplash();
    }
   
    // 在onLoad函数中，添加change监听
    optScaleMode.addEventListener('change', function(event){
            var value = event.target.value;
            setCookie('scaleMode', value);
            //cc.debug._resetDebugSetting(parseInt(value));
    });
    // 修改getEmulatedScreenSize方法, 添加scale缩放
    function getEmulatedScreenSize () {
        var w, h;
        var s = getScale();
        var idx = optsDevice.value;
        if ( idx === '0' ) {
            w = designWidth * s;
            h = designHeight * s;
        }
        else {
            var info = devices[parseInt(idx) - 1];
            w = info.width * s;
            h = info.height * s;
        }
        console.log("getEmulatedScreenSize",w, h , s);
        return {
            width: rotated ? h : w,
            height: rotated ? w : h
        };
    }