javascript - 仅在手机和平​​板电脑中显示移动应用下载层

Question

我们为我的公司提供网站和原生应用程序（iOS 和 Android）。

要求

当用户在设备中访问站点并显示您可以下载我们的本机应用程序的消息时，我想向手机和平板电脑显示模态对话框层

问题

这些层的 HTML、CSS 和 JavaScript 代码正在影响我们的页面权重，有什么方法可以让我们仅在移动设备和平板设备上动态包含特定代码（HTML、CSS 和 JavaScript）。

谢谢

阿维纳什·穆杜努里

Answer 1

您正在寻找一种叫做userAgent. 根据MSDN，

识别您的浏览器并向托管您访问的网站的服务器提供某些系统详细信息。

典型的用户代理将如下所示：

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:12.0) Gecko/20100101 Firefox/12.0

对于安卓手机，它看起来像这样：

Mozilla/5.0 (Linux; U; Android 4.0.3; ko-kr; LG-L160L Build/IML74K) AppleWebkit/534.30 (KHTML, like Gecko) 版本/4.0 Mobile Safari/534.30

可以通过这样的navigator对象访问此属性：

navigator.userAgent

在此处查看演示：http: //jsfiddle.net/hungerpain/cC7mY/

现在，为了检查您的浏览器是否是移动浏览器，我们设置了这样的系统：

var ua = navigator.userAgent;
if (ua.indexOf("Android") >= 0) {
     //its an android phone
     var androidversion = parseFloat(ua.slice(ua.indexOf("Android") + 8));
     if (androidversion != 4.0) {
        //version of android
     }
} else if ((ua.indexOf("iPhone") >= 0 || ua.indexOf("iPad") >= 0) && ua.indexOf("CriOS") == -1) {
    //you're on iOS
}

如果您想停止加载所有内容，则必须先将其放在文档的开头，然后才能在页面中加载其他任何内容。

NOTE CriOS是 Safari 上 Chrome 浏览器的用户代理指示器。这就是它包含在 iOS 列表中的原因。