簡體   English   中英

在Android上檢測WebApp模式

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM