-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
50 lines (37 loc) · 2.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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>(Mobile) Viewport</title>
<link rel="shortcut icon" href="favicon.ico">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="UTF-8"> <!-- syntax starting from html5 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" href="css/mobile-viewport.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>
<body onload="onReadyFunc()">
<div id="mobile-viewport" style="position:absolute; margin:0px; padding:0px; background-color: #ffcc00; -webkit-box-shadow: inset 0px 0px 3px 2px rgba(4, 34, 244, 1); box-shadow: inset 0px 0px 3px 2px rgba(4, 34, 244, 1);">
<h1>Hello, <br />world!</h1>
<div style="width:100%; position:absolute; top:50%; height:20px; left:0px; background-color:red;">this bar is 100% wide</div>
<div style="width:100%; position:absolute; left:50%; height:100%; width:20px; top:0px; background-color:green;">this bar is 100% tall</div>
<div style="width:100%; position:absolute; left:5px; height:20px; width:20px; bottom:5px; background-color:blue;"></div>
<div style="width:100%; position:absolute; right:5px; height:20px; width:20px; bottom:5px; background-color:blue;"></div>
<div style="width:100%; position:absolute; left:5px; height:20px; width:20px; top:5px; background-color:blue;"></div>
<div style="width:100%; position:absolute; right:5px; height:20px; width:20px; top:5px; background-color:blue;"></div>
</div>
<script type="text/javascript" src="js/jquery.mobile-viewport.js"></script>
<script type="text/javascript">
var myView;
function onReadyFunc() {
myView = $("#mobile-viewport").MobileViewport({hideBar: true});
//console.log(myView.customFunc());
myView.on('updateChangeEvent', function(e) {
//console.log('updateChangeEvent happened');
});
};
</script>
</body>
</html>