Skip to content

Instantly share code, notes, and snippets.

@4piu

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

Last active December 11, 2023 13:12
Show Gist options
  • Save 4piu/ebe12d55e4919a0c7a329315aa2dd0f9 to your computer and use it in GitHub Desktop.
Save 4piu/ebe12d55e4919a0c7a329315aa2dd0f9 to your computer and use it in GitHub Desktop.
Download ZIP
Fill screen with a fixed-aspect-ratio div, and rotate 90 degree on portrait screen
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment