Unity 导出 WebGL适配

博客
2165
2022-12-02

HTML作为容器文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

    <meta name="description" content="" />
    <title>调试界面</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>

    <div class="content" id="content">
        <iframe src="./xxxx.html" id="clientview"></iframe>
    </div>

    <script>
        const content = document.getElementById("content");
        const myw = document.body.clientWidth;
        const myh = document.body.clientHeight;

        inval();

        window.addEventListener("resize", function () {
            inval();
        });

        function inval() {
            if (content) {

                content.style.setProperty('--w', myw);
                content.style.setProperty('--h', myh);

                content.style.setProperty('--wpx', myw + "px");
                content.style.setProperty('--hpx', myh + "px");
            }
        }




    </script>

</body>

</html>

css 文件

html,
body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

html {
	-webkit-text-size-adjust: none;
}

.content {
	max-height: 100%;
	max-width: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}


#clientview {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
}


@media screen and (orientation: portrait) {

	.content {
		/* width: 100vmax;
		height: 100vmin; */
		aspect-ratio: var(--h) / var(--w) !important;
		transform-origin: top left;
		max-height: none;
		max-width: none;
		width: var(--hpx);
		height: var(--wpx);
		transform: rotate(90deg) translate(0, -100vmin);
	}

}

@media screen and (orientation: landscape) {

	.content {
		width: 100vmax !important;
		height: 100vmin !important;
		aspect-ratio: 16 / 9;
	}
}