html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- Created by: @Your Mom, modified by @iPang -->
<!-- Edit: New JavaScript code -->
<!DOCTYPE html>
<html>
<head>
<title>Screen Size</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="style.css">
</head>
<body id="body">
<h3 style="font-size: 5vw;">Get Window Width and Height</h3>
<div id="info">
<p id="infoPane"></p>
</div>
<script>
//JS by Solomoni Railoa
//Edit: Help for @iPang and @Your Mom
function updatesize() {
var parag = document.getElementById("infoPane");
parag.innerHTML = "";
parag.innerHTML += "<br>"+"Orientation: " + getOrientation();
parag.innerHTML += "<br>"+ "Width: " + window.innerWidth;
parag.innerHTML += "<br>"+ "Height: " + window.innerHeight;
//console.log("Shown above is the Viewport size, or window size. Is this your screen size below?\nScreen resolution (width × height): "+ screen.width*devicePixelRatio +'×'+ screen.height*devicePixelRatio);
}
onload = () => updatesize();
window.addEventListener("resize", updatesize);
function getOrientation(){
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* Created by: @Your Mom, modified by @iPang; */
/* Edit: Changes made to JS */
body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: inline-block;
justify-content: center;
align-items: center;
text-align: center;
font-family: sans-serif;
font-size: 25px;
background: fixed;
background-image: linear-gradient(to right, orange, tan);
}
#infoPane{
font-size: 4vw;
}
/* Edit: Made responsive font size; */
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run