forked from h5bp/mobile-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
137 lines (111 loc) · 6.39 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">
<!-- For iOS web apps. Delete if not needed. https://github.com/h5bp/mobile-boilerplate/issues/94 -->
<!--
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="">
-->
<!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 -->
<!--
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
-->
<!-- The stylesheets should be prefixed with Whateverweb.com URL's (ex: http://css.<appID>.wew.io/)
NB! These must reflect the prefix URL assigned to your WeW application on the setup page.
-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<!-- This script includes the necessary code needed for the Whateverweb.com client-side Device Detection
For usage examples see: https://github.com/whateverweb/device-detection/blob/master/examples/APIdemo
-->
<script src="js/vendor/wew.js"></script>
<!-- This inline script sets a cookie used by the Whateverweb.com Image Server
PS! Make sure you change the cookie domain using the wewNS.domain property below.
-->
<script>
var wewNS = wewNS || {};
wewNS.domain = ".wew.io";
wewNS.breakpoints = [['w', 768], ['m', 320], ['n', 0]]; //Make sure these breakpoints are in descending order and that they are defined in your image prefix URL's
//Set width of screen in a cookie
(function (w, d) {
//assign width to vpw
var e = d.documentElement,
g = d.getElementsByTagName('body')[0],
vpw = w.innerWidth || e.clientWidth || g.clientWidth;
var bp;
//set active breakpoint
for (var i = 0; i < wewNS.breakpoints.length; i++) {
if (vpw >= wewNS.breakpoints[i][1]) {
bp = wewNS.breakpoints[i][0];
break;
}
}
// Set devicePixelRatio, override on high-resolution screens
var dpr = 1;
if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;
// Make sure to use your own domain
var ccapDate = new Date()
ccapDate.setFullYear(ccapDate.getFullYear() + 1);
d.cookie = 'RESS=vpw.' + vpw + '|bp.' + bp + '|dpr.' + dpr + '; domain=' + wewNS.domain;
} (window, document));
</script>
</head>
<body>
<!-- Add your site or application content here -->
<header>HTML5 Mobile Boilerplate integrated with Whateverweb.com</header>
<p>
<blockquote>The following output is an example of how to use the Device Detection from Whateverweb.com:
<p>
<div id="single"></div>
<div id="set"></div>
</p>
</blockquote>
</p>
<p>
<img id="wewImg" src="http://img.demo.wew.io/vpw_1920/bp_w/pc/w_48/m_74/n_98/http://farm1.staticflickr.com/154/369525606_c77b69e92c_o_d.jpg" alt="Butterfly" />
<a href="http://www.flickr.com/photos/bengchye_loo/369525606/sizes/o/in/photostream/">Image credits</a>
</p>
<script language="javascript">
var WEW = WEW || {};
WEW.opts = {"ttl":"1000", "appID":"demo"};
var w=new wew(WEW);
w.getCap("device_os",callback);
w.getSet("myset",callbackSet);
function callback(t){
var e = document.getElementById("single");
e.innerHTML = "We guess you run " + t.device_os;
}
function callbackSet(t){
var e = document.getElementById("set");
e.innerHTML = (t.is_tables? "You're probably using a tablet" : "You're probably not on a tablet") + "<br>";
}
</script>
<script src="js/vendor/zepto.min.js"></script>
<script src="js/helper.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
</body>
</html>