Skip to content

Instantly share code, notes, and snippets.

@4piu

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

Created December 11, 2023 14:10
Show Gist options
  • Save 4piu/05d001657519704c08a77c63c8ce45da to your computer and use it in GitHub Desktop.
Save 4piu/05d001657519704c08a77c63c8ce45da to your computer and use it in GitHub Desktop.
Download ZIP
Fill screen with a div with a limited-range aspect ratio, and rotate 90 degree on portrait screen
Raw
fill-screen-aspect-ratio-range.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: 12/5) {
/* For viewports more landscape than 12:5, constrain by height */
#app {
height: 100vh;
width: calc(100vh * 12 / 5);
@supports (height: 1svh) and (width: 1svh) {
height: 100svh;
width: calc(100svh * 12 / 5);
}
}
}
@media screen and (orientation: landscape) and (min-aspect-ratio: 16/9) and (max-aspect-ratio: 12/5) {
/* For viewports between 16:9 and 24:5, fill screen */
#app {
height: 100vh;
width: 100vw;
@supports (height: 1svh) and (width: 1svw) {
height: 100svh;
width: 100svw;
}
}
}
@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 (min-aspect-ratio: 5/12) and (max-aspect-ratio: 9/16) {
/* For portrait viewports between 5:12 and 9:16, fill screen */
#app {
width: 100vh;
height: 100vw;
transform: translate(-50%, -50%) rotate(90deg);
transform-origin: center;
@supports (height: 1svh) and (width: 1svw) {
width: 100svh;
height: 100svw;
transform: translate(-50%, -50%) rotate(90deg);
transform-origin: center;
}
}
}
@media screen and (orientation: portrait) and (max-aspect-ratio: 5/12) {
/* For portrait viewports more landscape than 16:10, constrain by height */
#app {
width: calc(100vw * 12 / 5);
height: 100vw;
transform: translate(-50%, -50%) rotate(90deg);
transform-origin: center;
@supports (height: 1svw) and (width: 1svw) {
width: calc(100svw * 12 / 5);
height: 100svw;
transform: translate(-50%, -50%) rotate(90deg);
transform-origin: center;
}
}
}
</style>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment