[英]Detect webapp mode on android
我已經寫了這個小片段,以測試Webapp是否在Chrome的webapp模式下運行。 它現在可以使用,但是我只有Samsung S4可以測試。 通過測量可用屏幕尺寸與窗口內部尺寸的對比來實現。 問題是,我使用的偏移量在其他設備上是否有所不同。 我知道測試起來有點麻煩,但是不勝感激!
function detectWebApp() {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var isIOS = ua.match(/(ipad|iphone|ipod)/g);
var isChrome = ua.indexOf("chrome") > -1;
var offset = new Array();
var sh = screen.availHeight;
var sw = screen.availWidth;
var ih = window.innerHeight;
var iw = window.innerWidth;
var isWebApp = false;
var debug = false;
// for now only test for android and iOS, other mobile platforms may be included later
if(isAndroid || isIOS) {
// yes we're on a mobile OS
if(isIOS) {
if(window.navigator.standalone) isWebApp = true;
} else {
// it is not IOS
if(isAndroid) {
offset[0] = 0; // <- not all android devices show status header
offset[1] = 25; // <- is android status header
offset[2] = 44; // <- is including error message ssl cert;
// documentation says 25dp = status header
// , up til now all devices show this in javascript as 25px.
// todo check offset for other android devices
} else {
// for future use, if mobile platform other than iOS or android
offset[0] = 0;
}
if(window.orientation==0) {
for (var i = 0; i < offset.length; i++) {
if(ih == (sh - offset[i])) {
if(debug) alert(window.orientation + ' ' + ih + '==' + sh + ' offset:' + offset[i]);
isWebApp = true;
break;
}
}
} else {
if(isAndroid && isChrome) {
// chrome on android doesn't switch values of availHeight and availWidth on orientation landscape
for (var i = 0; i < offset.length; i++) {
if(ih == (sh - offset[i])) {
if(debug) alert(window.orientation + ' ' + ih + '==' + sh + ' offset:' + offset[i]);
isWebApp = true;
break;
}
}
} else {
for (var i = 0; i < offset.length; i++) {
if(ih == (sw - offset[i])) {
if(debug) alert(window.orientation + ' ' + ih + '==' + sw + ' offset:' + offset[i]);
isWebApp = true;
break;
}
}
}
}
}
}
return isWebApp;
}
我找到了完整的android設備列表, http ://www.emirweb.com/ScreenDeviceStatistics.php。大小為25dp或0dp(取決於設備)。 到目前為止,我已經對其進行測試的所有設備都將其轉換為25px(在javascript中),並且具有視口content =“ width = device-width,initial-scale = 1,maximum-scale = 1,user-scalable = no”。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.