-
Notifications
You must be signed in to change notification settings - Fork 2
/
example.html
68 lines (55 loc) · 2.26 KB
/
example.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!doctype HTML>
<html lang='en'>
<head>
<script src='mediahack.min.js'></script>
<style>
body { font-family: sans-serif; background: white; }
div { padding: 5px; }
i { color: #ccc;}
</style>
</head>
<body>
<!-- Default tests -->
<h3>Default Tests</h3>
<script>
mediahack(document.body);
</script>
<style>
body.landscape .m1 i { color: black; }
body.portrait .m2 i { color: black; }
body.small .m3 i { color: black; }
body.medium .m4 i { color: black; }
body.large .m5 i { color: black; }
</style>
<div class='m1'><i>✔</i> Landscape</div>
<div class='m2'><i>✔</i> Portrait</div>
<div class='m3'><i>✔</i> Small (0 - 768px)</div>
<div class='m4'><i>✔</i> Medium (769 - 991px)</div>
<div class='m5'><i>✔</i> Large (992px - *)</div>
<!-- Testing custom queries -->
<h3>Custom Query Tests</h3>
<div id='custom'>
<script>
mediahack(document.body, {
print : 'print',
tv : 'tv',
retina : 'screen and (-webkit-min-device-pixel-ratio: 1.25) and (min-resolution: 120dpi)',
ipad4 : ' screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)',
ipad5 : 'screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
});
</script>
<style>
.print .c1 i { color: black; }
.tv .c2 i { color: black; }
.retina .c3 i { color: black; }
.ipad4 .c4 i { color: black; }
.ipad5 .c5 i { color: black; }
</style>
<div class='c1'><i>✔</i> Print media</div>
<div class='c2'><i>✔</i> Watching form a TV</div>
<div class='c3'><i>✔</i> Using a retina display</div>
<div class='c4'><i>✔</i> On an iPad 4</div>
<div class='c5'><i>✔</i> On an iPad 5</div>
</div>
</body>
</html>