可以在javascript中检测web应用程序或移动浏览器

Question

我正在使用网络应用程序（iOS/Android）

基本上，我的应用程序看起来像

• 基本上只是网页
• 应用程序用WebView包裹它
• 所以从技术上来说，用户可以使用移动浏览器（如Safari，Chrome等甚至PC Web浏览器）和移动应用程序访问页面

我想做的是检测来自用户的请求是否来自移动应用程序或移动浏览器。（使用javascript）

这可能吗？ 如果是的话，推荐一下方法（我更喜欢原生javascript，因为项目是商业的）

谢谢。

附注我不需要使用

navigator.userAgent

进行设备检测，这项工作的目的是检测移动浏览器或移动应用程序，而不是用户使用的设备。

Answer 1

您可以为您的应用程序 webview 添加自定义用户代理字符串，以便您可以区分 webview 和 js 对于安卓你可以使用

myWebView.getSettings().setUserAgentString(<your custom user agent string>);

最好将额外的字符串附加到实际的用户代理字符串中

myWebView.getSettings.getSettings().setUserAgentString(myWebView.getSettings().getUserAgentString() + <your custom user agent string>);

您可以检查用户代理字符串是否包含来自 JavaScript 的自定义额外字符串。

Answer 2

您可以像这样使用用户代理：

const withDetectDevice = (ua = window.navigator.userAgent, bp_mobile = 768) => {
  ua = ua.toLowerCase().trim()
  const isIOS = ua.includes('iphone') || ua.includes('ipod') || ua.includes('ipad')
  const isAndroid = ua.includes('android')

  const CHECKPOINT = {
    'isMobile': isAndroid || ua.includes('iphone'),
    'ios': isIOS,
    'andriod': isAndroid,
    'iphone': ua.includes('iphone'),
    'isChromeIos': ua.includes('crios'),
    'isFacebook': ua.includes('fbios') || ua.includes('fb_iab'),
    'isInstagram': ua.includes('instagram'),
    'isLine': ua.includes(' line/'), 
    'isSafari': /safari\/[0-9.]+$/.test(ua),
    'isChrome': ua.includes('chrome')
  }
  return CHECKPOINT;
}


// Usage
const  { isMobile, ios, isChrome, isInstagram } = withDetectDevice()

console.log( {isMobile}, {ios}, {isChrome}, {isInstagram} )