html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Created by Your Mom-->
<!DOCTYPE html>
<html>
<head>
<!-- <meta name="viewport" content="width=device-width"> -->
<title>Screen size</title>
</head>
<body>
<h3>Get Window Width and Height</h3>
<div>
<b>Orientation: </b>
<span id="oriPane"></span>
</div>
<p id="sizePane"></p>
</body>
</html>
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
/* Created by Your Mom */
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: 1.015em;
background: fixed;
background-image: linear-gradient(to right, orange, tan);
}
Enter to Rename, Shift+Enter to Preview
js
js
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
window.addEventListener( "DOMContentLoaded", () =>
{
let lastOri = null; // previous screen orientation
let tiltSupported = false; // true when orientation change supported
// display screen orientation
const orientationHandler = () =>
{
if( !tiltSupported || lastOri === screen.orientation.angle )
{
event.preventDefault();
return false;
}
const angle = screen.orientation.angle;
const ori = angle ? `Landscape (${angle}°)` : `Portrait`;
oriPane.textContent = ori;
};
// display screen size
const resizeHandler = () =>
{
const width = window.innerWidth;
const height = window.innerHeight;
sizePane.innerHTML = `<b>Width:</b> ${width}<br /><b>Height:</b> ${height}`;
};
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run