-
Notifications
You must be signed in to change notification settings - Fork 0
/
supportTouch.html
95 lines (82 loc) · 3.66 KB
/
supportTouch.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
<!doctype html />
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=GBK" />
<title>test touch</title></head>
<body>
<h1>test touch</h1>
<p>
<script type="text/javascript">
var agent = navigator.userAgent.toLowerCase();
var scrWidth = screen.width;
var scrHeight = screen.height;
// The document.documentElement dimensions seem to be identical to
// the screen dimensions on all the mobile browsers I've tested so far
var elemWidth = document.documentElement.clientWidth;
var elemHeight = document.documentElement.clientHeight;
// We need to eliminate Symbian, Series 60, Windows Mobile and Blackberry
// browsers for this quick and dirty check. This can be done with the user agent.
var otherBrowser = (agent.indexOf("series60") != -1) || (agent.indexOf("symbian") != -1) || (agent.indexOf("windows ce") != -1) || (agent.indexOf("blackberry") != -1);
// If the screen orientation is defined we are in a modern mobile OS
var mobileOS = typeof orientation != 'undefined' ? true : false;
// If touch events are defined we are in a modern touch screen OS
var touchOS = ('ontouchstart' in document.documentElement) ? true : false;
// iPhone and iPad can be reliably identified with the navigator.platform
// string, which is currently only available on these devices.
var iOS = (navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPad") != -1) ? true : false;
// If the user agent string contains "android" then it's Android. If it
// doesn't but it's not another browser, not an iOS device and we're in
// a mobile and touch OS then we can be 99% certain that it's Android.
var android = (agent.indexOf("android") != -1) || (!iOS && !otherBrowser && touchOS && mobileOS) ? true : false;
document.write("<p><b>Screen width:</b> " + scrWidth + "px<br />" +
"<b>Screen height:</b> " + scrHeight + "px<br />" +
"<b>Document element width:</b> " + elemWidth + "px<br />" +
"<b>Document element height:</b> " + elemHeight + "px<br />" +
"<b>iOS device:</b> " + iOS + "<br />" +
"<b>Mobile OS:</b> " + mobileOS + "<br />" +
"<b>Touch OS:</b> " + touchOS + "<br />" +
"<b>Android device:</b> " + android + "</p>" +
"<p><b>User agent string:</b> " + navigator.userAgent + "</p>" +
"<p><b>platform string:</b> " + navigator.platform + "</p>"
);
</script>
</p>
<p>
('ontouchstart' in window) is
<script type="text/javascript">
document.writeln(('ontouchstart' in window));
</script>
</p>
<script type="text/javascript">
function testTouchWithCreateEvent() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
</script>
<p>
testTouchWithCreateEvent is
<script type="text/javascript">document.writeln(testTouchWithCreateEvent())</script>
</p>
<p style="text-decoration:line-through;color:Red">
'createTouch' in document is
<script type="text/javascript">
document.writeln((typeof TouchEvent != "undefined"));
</script>
不可用，在windows下用chrom浏览器也会返回true
;IE9返回false
;firefox返回false
；opera返回false
</p>
<p>
(typeof Touch == "object") is
<script type="text/javascript">
document.writeln(typeof Touch == "object");
</script>
</p>
</body>
</html>