4piu/fill-screen-fixed-aspect-ratio.html

## fill-screen-fixed-aspect-ratio.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>My FullScreen App</title>
</head>
<body>
    <div id="app">
        <h1>My FullScreen App</h1>
    </div>
</body>
<style>
    html, body {
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    #app {
        background-color: #3498db; /* Example background color */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Adjust sizes based on viewport dimensions */
    @media screen and (orientation: landscape) and (min-aspect-ratio: 16/9) {
        /* For viewports more landscape than 16:9, constrain by height */
        #app {
            height: 100vh;
            width: calc(100vh * 16 / 10);
            @supports (height: 1svh) and (width: 1svh) {
                height: 100svh;
                width: calc(100svh * 16 / 10);
            }
        }
    }

    @media screen and (orientation: landscape) and (max-aspect-ratio: 16/9) {
        /* For viewports more portrait than 16:9, constrain by width */
        #app {
            width: 100vw;
            height: calc(100vw * 9 / 16);
            @supports (height: 1svw) and (width: 1svw) {
                width: 100svw;
                height: calc(100svw * 9 / 16);
            }
        }
    }

    @media screen and (orientation: portrait) and (min-aspect-ratio: 9/16) {
        /* For portrait viewports more portrait than 16:9, constrain by width */
        #app {
            width: 100vh;
            height: calc(100vh * 9 / 16);
            transform: translate(-50%, -50%) rotate(90deg);
            transform-origin: center;
            @supports (height: 1svh) and (width: 1svh) {
                width: 100svh;
                height: calc(100svh * 9 / 16);
                transform: translate(-50%, -50%) rotate(90deg);
                transform-origin: center;
            }
        }
    }

    @media screen and (orientation: portrait) and (max-aspect-ratio: 9/16) {
        /* For portrait viewports more landscape than 16:10, constrain by height */
        #app {
            width: calc(100vw * 16 / 9);
            height: 100vw;
            transform: translate(-50%, -50%) rotate(90deg);
            transform-origin: center;
            @supports (height: 1svw) and (width: 1svw) {
                width: calc(100svw * 16 / 9);
                height: 100svw;
                transform: translate(-50%, -50%) rotate(90deg);
                transform-origin: center;
            }
        }
    }
</style>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>My FullScreen App</title>
	</head>
	<body>
	<div id="app">
	<h1>My FullScreen App</h1>
	</div>
	</body>
	<style>
	html, body {
	height: 100%;
	margin: 0;
	overflow: hidden;
	}

	#app {
	background-color: #3498db; /* Example background color */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	/* Adjust sizes based on viewport dimensions */
	@media screen and (orientation: landscape) and (min-aspect-ratio: 16/9) {
	/* For viewports more landscape than 16:9, constrain by height */
	#app {
	height: 100vh;
	width: calc(100vh * 16 / 10);
	@supports (height: 1svh) and (width: 1svh) {
	height: 100svh;
	width: calc(100svh * 16 / 10);
	}
	}
	}

	@media screen and (orientation: landscape) and (max-aspect-ratio: 16/9) {
	/* For viewports more portrait than 16:9, constrain by width */
	#app {
	width: 100vw;
	height: calc(100vw * 9 / 16);
	@supports (height: 1svw) and (width: 1svw) {
	width: 100svw;
	height: calc(100svw * 9 / 16);
	}
	}
	}

	@media screen and (orientation: portrait) and (min-aspect-ratio: 9/16) {
	/* For portrait viewports more portrait than 16:9, constrain by width */
	#app {
	width: 100vh;
	height: calc(100vh * 9 / 16);
	transform: translate(-50%, -50%) rotate(90deg);
	transform-origin: center;
	@supports (height: 1svh) and (width: 1svh) {
	width: 100svh;
	height: calc(100svh * 9 / 16);
	transform: translate(-50%, -50%) rotate(90deg);
	transform-origin: center;
	}
	}
	}

	@media screen and (orientation: portrait) and (max-aspect-ratio: 9/16) {
	/* For portrait viewports more landscape than 16:10, constrain by height */
	#app {
	width: calc(100vw * 16 / 9);
	height: 100vw;
	transform: translate(-50%, -50%) rotate(90deg);
	transform-origin: center;
	@supports (height: 1svw) and (width: 1svw) {
	width: calc(100svw * 16 / 9);
	height: 100svw;
	transform: translate(-50%, -50%) rotate(90deg);
	transform-origin: center;
	}
	}
	}
	</style>
	</html>