官网的pc 适配方案是怎么做的

Creator 3.x
#1

官网的适配是 当浏览器窗口变化时，Canvas 本身不自动调整 ，具体变现为 窗口变化时，浏览器窗口外的内容不显示 这个调用view.resizeWithBrowserSize(false) 可以实现，但是设置时候，view.setResizeCallback 监听失效，widgt失效。 UI 无法实现窗口变化时进行适配，论坛的大佬有没有解决方案

1赞
#2

打包成web-mobile模式， 自动铺满窗口；
然后游戏里只要widget always或者onResize 就行了

1赞
#3

你这种不对 当浏览器窗口大小变化后，你的canvas 是会被拉伸的

#4

按照cocos论坛中一篇帖子的方法，直接修改index.html
https://forum.cocos.org/t/topic/107886
首先，构建生成web-desktop，打开index.html修改。
(1)删除cocos自带的一些节点。

(2)修改GameDiv节点，默认生成的是一个以设计分辨率的像素大小的div，这会导致不论在多大分辨率的游览器上，都是一个大小。
canvas id=“GameCanvas” oncontextmenu=“event.preventDefault()” tabindex=“0”

(3)添加控制GameDiv节点大小的代码
(function () {
function setGameDiveSize(){
var height = document.documentElement.clientHeight;
var width = 1920 / 1080 * height;
var gameDiv = document.getElementById(‘GameDiv’);
gameDiv.style.height = ${height}px;
gameDiv.style.width = ${width}px;
}

	var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    var isPC = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
			isPC = false;
			break;
        }
    }
    if(isPC) {
		document.body.style.overflow = "hidden"; //内容会被修剪，元素框外面的内容不会被显示，浏览器不会显示滚动条。
		setGameDiveSize();
		window.addEventListener('resize', function () {
			setGameDiveSize();
		});
		window.addEventListener('DOMContentLoaded', function () {
		   setGameDiveSize();
		});
    }
})();

注意：以上代码游戏的设计分辨率是1920*1080，且是适应游览器的高而调整游戏画布的宽。不是完全的拉满整个游览器的可视区域。对于一个web游戏已经够用了。若想完美的适配游览器，那就需要即懂cocos，又懂html的大佬出来露一手了。

(4)去除默认的黑色边框并设置背景色为黑色
style-desktop.css----------
body {
cursor: default;
padding: 0;
border: 0;
margin: 0;

text-align: center;
background-color: black;
font-family: Helvetica, Verdana, Arial, sans-serif;
}
#GameDiv {
width: 800px;
height: 450px;
margin: 0 auto;
background: white;
position: relative;
border: 0px solid white;
border-radius: 0px;
box-shadow: 0 5px 40px #333
}

1赞
#5

你这个 当浏览器尺寸变化的时候 canvas 也会进行缩放，官网的也不一致