在安卓设备上显示 div答案

【问题标题】：Show div on android devices在安卓设备上显示 div
【发布时间】：2019-03-10 18:28:27
【问题描述】：

是否可以有一个仅在特定设备中可见的 div 标签？我只想在浏览器 android 设备中显示一个 div，而不是在 webview android 中显示这个 div。

<div class="android-devices"><a href="#">Android user please click here to download application</a></div>

这可能吗？我用wordpress

【问题讨论】：

标签： javascript php html css

【解决方案1】：

您可以使用 javascript 来实现。

首先将hide 类添加到所有android-devices div 中

并将此代码添加到您的 css 文件中：

.hide {
  display: none;
}

并将其添加到您的 javascript 文件中

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
if(isAndroid) {
  var els = document.querySelectorAll('.android-devices');
  els.forEach(function(el) {
      el.classList.remove('hide');
  })
}

此代码将检测 android 设备并从您的 div 中删除 hide 类。

更新：

如果你想在android上隐藏一些div，你可以应用相同的逻辑。

就用这条线

el.classList.add('hide');

而不是这个

el.classList.remove('hide');

并且默认情况下不要将hide 类添加到您的android-devices div 中。

【讨论】：

另外我在 webview android 中是什么（不显示）这个 div。有可能吗？
谢谢索尔汉。但我想在（Android 浏览器）上显示这个 Div，而不是在（Android Webview）上显示
为了检测 webview 或浏览器，您应该检查请求的标头。 Check this answer
这个答案适用于 ios。您可以在这里的新帖子中编写 Android 的完整代码吗？而“your.app.id”是我的包名android app？

【解决方案2】：

您可以通过以下步骤来做到这一点

- 最初将 div 设置为隐藏（HTML 部分）

  <div class="android-devices hide"><a href="#">Android user please click here to download application</a></div>

- 检查当前设备是否为android设备，如果是则显示div（JS部分）

var isDeviceAndroid = /(android)/i.test(navigator.userAgent);
if( isDeviceAndroid  ){document.getElementsByClassName('android-devices').classList.remove("hide");

}

- CSS 部分

.hide{display:none;}

【讨论】：