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
<!DOCTYPE html>
<html>
<head>
<title>Responsiveness</title>
<!--⏬ 🔻 ⬇ Content Width ⬇ 🔻 ⏬-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ⏫ 🔺 ⬆ ... ⬆ 🔺 ⏫ -->
</head>
<body>
<div id=mobile>
<div id=portrait> I am in <h2>Portrait</h2> view. </div>
<div id=landscape> I am in <h2>Landscape</h2> view. </div>
</div>
<div id=desktop> I am in <h2>Desktop</h2> view. </div>
</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
17
18
19
20
21
22
23
24
25
26
27
28
body {
text-align: center;
background-color: lightgrey;
}
#mobile, #desktop {
color: darkred;
font-size: 140%;
}
h2 {
display: inline-block;
color: darkblue;
}
/* ⏬ 🔻 ⬇ Orientation ⬇ 🔻 ⏬ */
@media only screen and (orientation: portrait) {
#landscape { display: none; }
#portrait { display: block; }
}
@media only screen and (orientation: landscape) {
#landscape { display: block; }
#portrait { display: none; }
}
/* @media can be used for a variety of things like different content for different width devices. */
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
// ⏬ 🔻 ⬇ Mobile/Desktop View ⬇ 🔻 ⏬
window.onload = function() {
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
var mobile = document.getElementById("mobile");
var desktop = document.getElementById("desktop");
if (isMobile) {
mobile.style.display = "block";
desktop.style.display = "none";
} else {
mobile.style.display = "none";
desktop.style.display = "block";
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run