/
index.html
46 lines (45 loc) · 2.94 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
<title>MQtest.io — A simple tool to help identify which media queries your device responds to.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-title" content="MQtest.io">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/icon.png">
<link rel="stylesheet" href="css/styles.css?v=2">
<script src="js/scripts.js?v=2"></script>
<script>
var device_ratio = screen.width + '/' + screen.height;
document.write('<style class="test-styles">@media screen and (device-aspect-ratio: ' + device_ratio + ') {.aspect-ratio-unsupported {display: none;} .aspect-ratio {display: block;}}</style>');
document.write('<style class="test-styles">');
for (var i=mq_step;i<maximumDPI+1;i+=mq_step) {
document.write('@media (min-resolution: ' + (i+1) + 'dpi) and (max-resolution: ' + (i+mq_step) + 'dpi) {');
document.write('#resolution' + i + '{display: list-item}');
document.write('.resolution {display: none;} }');
}
document.write('</style>');
</script>
<script src="//use.typekit.net/rjj7zhh.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div class="wrapper">
<h1><a href="http://mqtest.io">MQtest.io</a></h1>
<a href="#" id="view-info" title="More info">?</a>
<h2>A simple tool to help identify which media queries your device responds to.</h2>
<p id="info" class="closed">This test isn’t about what media que­ries your device <a href="http://www.jordanm.co.uk/palmreader" rel="external">can or cannot</a> see (but it does show an 'unsupported' label if a device doesn‘t support something). In­stead it shows you which dimen­sions your de­vice will res­pond to when using ‘width=device-width,initial-scale=1.’</p>
<button id="testButton">Refresh tests <span id="iterations"></span></button>
<h3>Device responds to</h3>
<ul class="nosupport">
<li>Your browser doesn't support media queries :(</li>
</ul>
<ul id="respondList">
<li id="no_js">JavaScript is turned off or not supported.</li>
<script>document.getElementById('no_js').innerHTML = '';</script>
</ul>
<h3>User agent</h3>
<div id="useragent"></div>
<p class="footer">Built by <a href="http://twitter.com/viljamis" rel="external">Viljami Salminen</a>. Source code is hosted at <a href="http://github.com/viljamis/mqtest" rel="external">GitHub</a>. Some parts of the tests adop­ted from <a href="http://www.quirksmode.org/m/tests/widthtest_vpdevice.html" rel="external">Quirks­mode.org</a>, <a href="http://andrew.hedges.name/experiments/aspect_ratio/" rel="external">Aspect Ratio Calculator</a> and <a href="http://bbc-news-prototypes.heroku.com/reporter/index.html" rel="external">BBC’s Device Reporter</a>.</p>
</div>
</body>
</html>