如何在 AngularJS 中隐藏 android 库存浏览器的布局？

Question

我有一个 Web 应用程序的已发布 Beta 版本，它是用 AngularJS 编写并使用 Angular-Material。不幸的是，布局在 Android 的 Stock 浏览器（而不是 chrome）上完全无法使用并且一团糟。由于这需要一些时间来修复，我正在尝试显示

"Sorry the Beta-Webapp is not ready for this browser yet, please use Chrome"

留言。

是否有一种简单的方法来检测 Android Stock 浏览器并使用 ng-if 和控制器方法隐藏通常的布局？

Answer 1

tl;dr

var isStockAndroid = /^Mozilla\/\d+\.\d+\s\(Linux;\sU;/.test(window.navigator.userAgent);

在 Chrome 开发工具中，您可以模仿 Android 浏览器来确定 userAgent 字符串（可通过 window.navigator.userAgent 获得）。然后，您可以确定此用户代理字符串与移动 Chrome 浏览器之间的差异。这将允许您检测当前用户是否在 Android 浏览器上，并且在这种情况下您可以重定向到一个特殊视图。

以下是我使用 Chrome 开发工具生成的用户代理字符串的一些示例：

Chrome: "Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.76 Safari/537.36"

Android 浏览器： "Mozilla/5.0 (Linux; U; Android 2.3.6; en-us; Nexus S Build/GRK39F) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

在我所做的所有测试中，当用户代理是 Android 浏览器时，U; 似乎总是出现在 "Mozilla/5.0 (Linux; 之后。

假设这总是正确的（没有保证，但 this 站点似乎证实了这一点），您可以使用以下代码来确定当前浏览器是否正常 Android:

var isStockAndroid = /^Mozilla\/\d+\.\d+\s\(Linux;\sU;/.test(window.navigator.userAgent);

如何在 AngularJS 中隐藏 android 库存浏览器的布局？

How to hide layout on android stock browser in AngularJS?

android

angularjs

angular-material