-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
285 lines (258 loc) · 21.1 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>網頁環境基本檢測工具 user-device-checker</title>
<meta name="description" content="數不清的上網裝置 x 裝置設定 x 瀏覽器設定 x 瀏覽器擴充套件的排列組合，能為現代的網頁環境帶來多少變因?">
<link rel="icon" type="image/png" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqtree/1.4.0/jqtree.min.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/modernizr.2.8.3.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-89993817-7', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript" src="//typesquare.com/accessor/zh_tw/script/typesquare.js?CrenjcXTbrM%3D" charset="utf-8"></script>
</head>
<body>
<div class="container">
<h1 class="page_title"><span class="glyphicon glyphicon-globe"></span> 網頁環境基本檢測工具</h1>
<ol class="check_list">
<!--[if lte IE 8]>
<li class="warning">我們發現您還在使用已經停止更新的不安全瀏覽器</li>
<![endif]-->
<noscript><li class="warning log">瀏覽器 Java Script 功能已被停用</noscript></li></noscript>
<li class="js_error log">瀏覽器 Java Script 功能異常</li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="日期時間不正確，可能導致 https 的資料無法載入">裝置日期時間:<span id="time"></span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="可能影響網站表單或紀錄相關功能">瀏覽器 Cookies 功能:<span id="isCookies"></span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="網頁可能無法正常顯示與操作">瀏覽器名稱:<span id="bname"></span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="網頁可能無法正常顯示與操作，舊的版本可能有安全漏洞">瀏覽器版本:<span id="bver"></span><p class="warning item_browser_update" >您的瀏覽器需要更新</p></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="網頁可能無法正常顯示與操作，舊的版本可能有安全漏洞">瀏覽器引擎與版本:<span id="ever"></span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="網頁可能無法正常顯示與操作，舊的版本可能有安全漏洞">作業系統:<span id="os"></span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="您值得上網時使用更好用的瀏覽器">微軟出品的瀏覽器:<span id="isMS"></span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="檢測瀏覽器行為">是桌上型電腦:<span id="isDesktop"></span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="檢測瀏覽器行為">觸控螢幕:<span id="isTouch"></span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="檢測瀏覽器行為">已開啟觸控功能:<span id="isTouch2"></span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="檢測瀏覽器行為">行動裝置:<span id="isMobile"></span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="檢測瀏覽器行為">行動裝置名稱:<span id="dname"></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="與一般的網頁瀏覽器不同，可能造成網頁無法正常操作或顯示">是 InApp Browser:<span id="isInApp"></span></li>
<li data-toggle="tooltip" data-placement="bottom" title="檢測您的網路環境是否封鎖 Google CDN">Google CDN 被和諧:<span class="material-icons">clear</span></li>
<li data-toggle="tooltip" data-placement="bottom" title="檢測您的瀏覽器能否顯示微軟正黑體">黑體字顯示:<strong>碧筵綰趙錢孫李</strong></li>
<li data-toggle="tooltip" data-placement="bottom" title="檢測您的瀏覽器是否支援圖示字型技術，或是瀏覽器安全權限設定有誤">是否支援 IconFont:<span class="glyphicon glyphicon-ok"></span></li>
<li class="item_webfont"data-toggle="tooltip" data-placement="bottom" title="檢測您的瀏覽器是否支援完整雲端字型技術，或是瀏覽器安全權限設定有誤">是否完整顯示 WebFont:<br><span class="font_kai"> ↑↓←→南去經三國</span><span class="font_yuan">，東來過五湖123</span><span class="font_kai">國</span><span class="font_kai fbd">國</span><span class="font_kai fw100">國</span><span class="font_kai fw300">國</span><span class="font_b5">Typesquare文鼎勘亭流AR Kantingliu B5 Ultra ↑↓←→</span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="將會發生文字或網頁顯示異常、圖片模糊等情況。">是否有調整瀏覽器字型設定:<span id="isMinFS"></span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="將會發生文字或網頁顯示異常、圖片模糊等情況。">是否有調整瀏覽器縮放倍率:<span id="isZoom"></span></li>
<li class="log item_fontsize_warning">將會發生文字或網頁顯示異常、圖片模糊等情況。</li>
<li class="log item_res" data-toggle="tooltip" data-placement="bottom" title="檢測您的視窗相關資訊，此數值可能受網頁縮放影響，而無法顯示正確資訊">螢幕解析度:<span id="sw"></span>*<span id="sh"></span></li>
<li class="log item_res" data-toggle="tooltip" data-placement="bottom" title="檢測您的視窗相關資訊，此數值可能受網頁縮放影響，而無法顯示正確資訊">視窗大小:<span id="ww"></span>*<span id="wh"></span></li>
<li class="log item_res" data-toggle="tooltip" data-placement="bottom" title="檢測您的視窗相關資訊，此數值可能受網頁縮放影響，而無法顯示正確資訊">網頁寬高:<span id="dw"></span>*<span id="dh"></span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="檢測您的瀏覽器能否正常執行 Google 分析功能">執行 Google Analytics:<span id="isGA"></span></li>
<li data-toggle="tooltip" data-placement="bottom" title="檢測螢幕設定是否異常" class="item_color_test">螢幕是否調太亮:<span style="color:#f5f5f5;font-weight:normal">還有我</span><span style="color:#eee;font-weight:normal">看得到我嗎?</span></li>
<li data-toggle="tooltip" data-placement="bottom" title="檢測螢幕設定是否異常" class="item_color_test">螢幕對比檢測:<span style="color:#2C2C2D;font-weight:bold;background:#000000">物產豐隆</span><span style="color:#333;font-weight:bold;background:#000000">哆拉A夢</span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="啟用擋廣告軟體，可能造成部分正常內容無法顯示">有啟用 Adblock 等擋廣告軟體:<span id="isBlocked"></span></li>
<li data-toggle="tooltip" data-placement="bottom" title="啟用擋廣告軟體，可能造成部分正常內容無法顯示">圖片有被擋廣告軟體擋掉嗎?<br><a href="https://www.youtube.com/user/kos44444" target="_blank"><img class="ad" src="ad.jpg"></a></li>
<li data-toggle="tooltip" data-placement="bottom" title="檢查使用者認色能力，與螢幕色彩是否正確">從左到右的數字是?<br><img class="img-responsive" src="color.jpg"></li>
<li data-toggle="tooltip" data-placement="bottom" title="檢查 Flash 內容是否被阻擋，或是無法執行">Flash:<br><embed width="250" height="90" src="test.swf" quality="high" pluginspage="http://www.adobe.com/go/getflashplayer_tw" align="middle" play="true" loop="true" scale="noborder" devicefont="false"name="index" menu="true" allowfullscreen="false" allowscriptaccess="sameDomain" salign="" type="application/x-shockwave-flash"></li>
<li data-toggle="tooltip" data-placement="bottom" title="檢查螢幕解析度比例是否正確">螢幕解析度比例檢測:<span id="circle">正圓形?</span></li>
<li class="item_imgformat" data-toggle="tooltip" data-placement="bottom" title="檢查瀏覽器是否支援 WEBP, SVG">支援圖形格式:<img src="webp.webp" alt="webp"><img src="svg.svg" alt="svg"></li>
<li data-toggle="tooltip" data-placement="bottom" title="檢查瀏覽器是否支援 APNG 格式">會動嗎? <img src="gifapng.png" alt="apng" class="img-responsive"></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="檢查來源網址內容">來源網址:<br><span id="refer"></span></li>
<li data-toggle="tooltip" data-placement="bottom" title="檢測瀏覽器是否阻擋彈跳視窗或開新視窗">彈跳視窗測試:<a href="http://www.google.com" target="_blank">第 1 種</a>、<a href="javascript:void(0)" id="jspop">第 2 種</a></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="檢測瀏覽器是否勾選不要再顯示對話方塊等相關設定">confirm 確認視窗功能測試:<span id="isConfirm">異常</span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="檢測瀏覽器是否勾選不要再顯示對話方塊等相關設定">alert 提示視窗功能測試:<span id="isAlert">異常</span></li>
<li>IP位址:<span id="ip"></span></li>
<li class="log item_geo">地址位置:<br>
<div id="twzipcode" class="hide"></div>
國家 : <span id="country">沒按允許或無法偵測</span>, <br>
縣市 : <span id="county">沒按允許或無法偵測</span><span id="district"></span>,<br>
緯度 : <span id="latitude">無法取得</span>, <br>經度 : <span id="longitude">無法取得</span></li>
<li class="log" data-toggle="tooltip" data-placement="bottom" title="檢測瀏覽器裝置基本資訊">UserAgent:<span id="ua"></span></li>
</ol>
<button class="btn btn-default" id="btn_send"><span class="glyphicon glyphicon-envelope"></span><span class="send_txt">回報上述資訊</span></button>
</div>
<div id="root" style="display:none"></div>
<footer>感謝 : <a href="https://material.io/icons/" target="_blank">Material icons</a>、<a href="f2etw/detect-inapp" target="_blank">f2etw/detect-inapp</a>、<a href="http://vergrabber.kingu.pl/" target="_blank">vergrabber</a>、<a href="https://modernizr.com/" target="_blank">modernizr</a>、<a href="http://mydevice.io/" target="_blank">mydevice.io</a>、<a href="http://enchroma.com/test/instructions/" target="_blank">enchroma - TEST YOUR COLOR VISION</a>、<a href="http://rodert.pixnet.net/blog/post/36082979-%E3%80%8C%E9%A1%8F%E8%89%B2%E5%85%B1%E8%AD%98%E3%80%8D%E4%BD%A0%E8%B7%9F%E6%88%91%E7%9C%8B%E5%88%B0%E7%9A%84%E8%89%B2%E7%9A%86%E4%B8%80%E6%A8%A3%E5%97%8E%EF%BC%9F" target="_blank">顏色共識</a>、<a href="http://faisalman.github.io/ua-parser-js/" target="_blank">ua-parser-js</a>、<a href="https://codepen.io/quasimondo/" target="_blank">Mario Klingemann</a>、
<a href="http://www.freeactionscript.com/tag/dynamic-explosion-effects/" target="_blank">Free ActionScript</a>、
<a href="https://code.essoduke.org/twzipcode/" target="_blank">essoduke/jQuery-TWzipcode</a>、
<a href="http://ipify.org" target="_blank">ipify.org</a>、<a href="http://www.geonames.org/" target="_blank">GeoNames</a>、<a href="https://freegeoip.net/" target="_blank">FreeGeoIP</a>
</footer>
<div id="bg" /></div>
<!--[if gt IE 8]>
<script src="js/bg.js"></script>
<script src="js/inapp.js"></script>
<![endif]-->
<!--[if !(IE)]><!-->
<script src="js/bg.js"></script>
<script src="js/inapp.js"></script>
<!--<![endif]-->
<script src="js/bootstrap.min.js"></script>
<script src="js/ua-parser.js"></script>
<script src="js/jquery.twzipcode.min.js"></script>
<script type="application/javascript">function getIP(json) {$('#ip').text(json.ip);}</script>
<script type="application/javascript" src="//api.ipify.org?format=jsonp&callback=getIP"></script>
<img src="qrcode.png" class="qrcode">
<script>
$(function(){
$('[data-toggle="tooltip"]').tooltip();
function addZero(i) {if (i < 10) {i = "0" + i;} return i;}
var currentdate = new Date();
var datetime = currentdate.getFullYear() + "/" + (currentdate.getMonth()+1) + "/" + currentdate.getDate() + " "+ addZero(currentdate.getHours()) + ":" + addZero(currentdate.getMinutes()) ;
$('#time').text(datetime);
$('#twzipcode').twzipcode({
'css': ['county', 'district', 'zipcode'],
'detect': function (coords) {
$('#county').text($('.county option:selected').text());
$('#district').text($('.district option:selected').text());
}
});
// only for http
// if (navigator.geolocation) {
// navigator.geolocation.getCurrentPosition(function(position) {
// $.getJSON('http://ws.geonames.org/countryCode', {
// lat: position.coords.latitude,
// lng: position.coords.longitude,
// username:'su1205su',
// type: 'JSON'
// }, function(result) {
// $('#country').text(result.countryName);
// });
// });
// }
$.getJSON("https://freegeoip.net/json/", function(data) {
const countryCode = data.country_code;
const countryName = data.country_name;
const ip = data.ip;
const timezone = data.time_zone;
const latitude = data.latitude;
const longitude = data.longitude;
$('#latitude').text(latitude);
$('#longitude').text(longitude);
$('#country').text(countryName);
//alert("IP: " + ip);
//alert("Time Zone: " + timezone);
});
var data = {"access_token": "822grqoxpufrd2y62525n5ae"};
function onSuccess() {
$('#btn_send').prop('disabled',true);
$('.send_txt').text('發送成功');
}
function onError(error) {
$('#btn_send').prop('disabled',false);
$('.send_txt').text('發送失敗，點此再試一次')
}
var sendButton = $('#btn_send');
function send() {
var log=""
$('.check_list .log').each(function(){
if ($(this).is(":visible")) log+= $(this).text() +'\n'
})
log += $('#root').text();
sendButton.val('發送中…');
sendButton.prop('disabled',true);
var subject = "裝置回報資訊 " + datetime;
var message = log;
//console.log(log);
data['subject'] = subject;
data['text'] = message;
$.post('https://postmail.invotes.com/send',
data,
onSuccess
).fail(onError);
return false;
}
sendButton.on('click', send);
})
if (confirm('confirm 確認視窗功能測試')) {
$('#isConfirm').text('按了確定');
alert('按了確定');
$('#isAlert').text('正常');
}
else {
$('#isConfirm').text('按了取消');
alert('按了取消');
$('#isAlert').text('正常');
}
var parser = new UAParser();
$('#bname').text($.ua.browser.name);
$('#bver').text($.ua.browser.version);
$('#ever').text($.ua.engine.name+' '+$.ua.engine.version);
$('#os').text($.ua.os.name+' '+$.ua.os.version);
if ($.ua.browser.name == "Chrome" && parseInt($.ua.browser.version.split('.')[0], 10) < 59) $('.item_browser_update').show();
if ($.ua.browser.name == "Firefox" && parseInt($.ua.browser.version.split('.')[0], 10) < 53) $('.item_browser_update').show();
window.ga ? $('#isGA').text('可以') : $('#isGA').text('不行');
navigator.cookieEnabled ? $('#isCookies').text('正常') : $('#isCookies').text('異常');
var gteIE10 = window.navigator.msPointerEnabled;
var lteie9 = isIE = document.all && !window.atob;
if (gteIE10 || lteie9 || /edge/i.test(navigator.userAgent)) $('#isMS').text('是的');
else $('#isMS').text('不是');
Modernizr.touchevents ? $('#isTouch').text('是') : $('#isTouch').text('不是');
Modernizr.forcetouch ? $('#isTouch2').text('已開啟') : $('#isTouch2').text('沒有');
$('.p-1').each(function(){
var isapp_result = "";
if ($(this).text()== "inapp.isDesktop()") {
isdesktop_result = $(this).parent().text().replace(/inapp.isDesktop()/g, "");
isdesktop_result == "false()" ? $('#isDesktop').text('不是桌上型電腦') : $('#isDesktop').text("是桌上型電腦");
}
if ($(this).text()== "inapp.isInApp()") {
isapp_result = $(this).parent().text().replace(/inapp.isInApp()/g, "");
isapp_result == "false()" ? $('#isInApp').text("不是") : $('#isInApp').text("就是");
}
if ($(this).text()== "inapp.isMobile()") {
ismobile_result = $(this).parent().text().replace(/inapp.isMobile()/g, "");
ismobile_result == "false()" ? $('#isMobile').text("不是") : $('#isMobile').text("是行動裝置")
}
if ($(this).text()== "inapp.device") {
device_result = $(this).parent().text().replace(/inapp.device/g, "");
device_result == "other" ? $('#dname').text("不是行動裝置") : $('#dname').text(device_result);
}
})
var root = document.getElementById('html');
if(typeof getComputedStyle !== 'undefined'){
var rfsstyle = window.getComputedStyle(root, null).getPropertyValue('font-size');
var rfsstyle = parseInt(rfsstyle);
rfsstyle != 16 ? $('#isMinFS').text('有改過('+pxr+')') : $('#isMinFS').text('沒有')
}
else $('#isMinFS').text('瀏覽器版本過低');
var pxr = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
pxr = pxr.toFixed(4);
pxr < 1 ? $('#isZoom').text('有縮小('+pxr+')') : $('#isZoom').text('');
//!isNaN(pxr) ? $('#isZoom').text('有放大') : $('#isZoom').text('預設值');
//console.log(pxr)
var adBlockEnabled = false;
var testAd = document.createElement('div');
testAd.innerHTML = ' ';
testAd.className = 'adsbox';
document.body.appendChild(testAd);
window.setTimeout(function() {
if (testAd.offsetHeight === 0) {
adBlockEnabled = true;
}
//testAd.remove();
adBlockEnabled ? $('#isBlocked').text('是') : $('#isBlocked').text('否');
}, 100);
$('#ww').text($(window).width());
$('#wh').text($(window).height());
$('#dw').text($(document).width());
$('#dh').text($(document).height());
$('#sw').text(window.screen.width);
$('#sh').text(window.screen.height);
$('#jspop').click(function(event) {
var windowSize = "width=" + window.innerWidth + ",height=" + window.innerHeight + ",scrollbars=no";
window.open('http://www.google.com', 'popup', windowSize);
});
$('#refer').text(document.referrer);
$('#ua').text(navigator.userAgent);
$('.js_error').hide();
</script>
</body>
</html>