在Android上检测WebApp模式

Question

I have written this little snippet, to test if a webapp is running in webapp mode for Chrome. It works for now, but I only have a Samsung S4 to test this on. It does so by measuring the available screen size vs the window inner size. Question is, does the offset I use differ on other devices. I know its a bit of a hassle to test this, but it would be very appreciated!

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;

}

Answer 1

I found a full list of android devices, http://www.emirweb.com/ScreenDeviceStatistics.php The size is either 25dp or 0dp (depending on the device). Up till now all devices I've tested it on translate this to 25px (in javascript) with viewport content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no".