forked from MathiasaurusRex/screen-size-getter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·25 lines (22 loc) · 1.44 KB
/
index.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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9 ie8"> <![endif]-->
<!--[if IE 9]> <html class="no-js lt-ie10 ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>GET THE WINDOW SIZE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/small.css">
<link rel="stylesheet" media="screen and (min-width: 720px)" href="css/medium.css">
<link rel="stylesheet" media="screen and (min-width: 1024px)" href="css/large.css">
</head>
<body class="js-color">
<h1>Type <em>currentWindowSize</em> into the console to get what the current window size is.</h1>
<p>This function looks at body:after and grabs the content. (In your stylesheets you will have to define the differences between breakpoints. Small.css should use body:after {content: "small"} etc.</p>
<p>You can then use this in your Javascript if the funtionality changes between breakpoints without having to check random elements display properties or the actual width of the screen. Tie your JS to the actual breakpoints.</p>
<script src="js/main.js"></script>
</body>
</html>