在Android上檢測webapp模式

我已經寫了這個小片段來測試一個webapp是否在Chrome的webapp模式下運行。它現在工作，但我只有一個三星S4來測試。它通過測量可用屏幕尺寸與窗口內部尺寸來實現。問題是，我使用的偏移量在其他設備上有所不同。我知道測試它有點麻煩，但是非常感謝！在Android上檢測webapp模式

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;

}

來源

2014-02-10 user3294859

爲什麼你需要這樣做？ – Kinlan

我需要一個web應用程序，它需要檢測它是否在獨立模式下在移動設備上的Chrome或Safari上運行。如果是這樣，我的網站/ web應用程序將有不同的行爲（明確登錄部分） – user3294859

感謝您的澄清。 – Kinlan

我發現機器人設備的完整列表，http://www.emirweb.com/ScreenDeviceStatistics.php 大小是要麼25dp或0dp（根據設備）。到目前爲止，我測試過的所有設備都將其轉換爲25px（javascript），其視口內容爲「width = device-width，initial-scale = 1，maximum-scale = 1，user-scalable = no」。

來源

2014-02-19 23:35:25 user3294859

在Android上檢測webapp模式

回答

相關問題