2

我有一个网站，我嵌入了 lightview 以调出一个 iframe，其中包含 Google Voice 徽章。此徽章是基于 Flash 的，因此在 iOS 中看不到。为了在 iOS 中获取要拨打的电话号码，它必须具有不同的格式。

我的问题是如何向 HTML 添加逻辑以了解根据浏览器类型（移动设备与普通）选择哪种类型？

完整的浏览器支持：

Feel free to give me a <a class='lightview' data-lightview-type="iframe" href="pages/call.html" data-lightview-options="width: 230, height: 101">call</a>.

移动浏览器支持：

Feel free to give me a <a href="tel:1-408-555-5555">call</a>.
4

3 回答 3

3

您可以尝试检测Flash 是否可用，而不是检测浏览器。

您可以通过将以下代码放入HTML 文档元素中包含的 JS 脚本，将适当的click事件处理程序动态绑定到具有href属性的所有链接（tel:如果 Flash 可用） ：HEAD

if (FlashDetect.installed) {
    // $ means jQuery which is used to bind `click` event.
    $(document).on('click', 'A[href^="tel:"]', function() {
        // [Some specific code for Flash-enabled systems.]
    })
}
于 2012-11-07T00:08:17.940 回答
1

使用 JavaScript，您可以检查touchstart事件document.documentElement以检测触摸设备：

var isTouch = 'touchstart' in document.documentElement;

然后在 Android 上你可以检查 userAgent 看它是否是手机：

var isMobile = navigator.userAgent.toLowerCase().indexOf("mobile") > -1;

在 IOS 上只需检查iPhone：

var isMobile = navigator.userAgent.toLowerCase().indexOf("iphone") > -1;

派对的其余部分您可以自己添加。希望你能得到图片：

var isTouch = 'touchstart' in document.documentElement,
    ua = navigator.userAgent.toLowerCase(),
    isMobile = isTouch ? ua.indexOf("android") > -1 ? ua.indexOf("mobile") > -1 : ua.indexOf("iphone") > -1 : false;

有点复杂。

只是为了快速回答您的评论：

onload = function() {
    var isTouch = 'touchstart' in document.documentElement,
        ua = navigator.userAgent.toLowerCase(),
        isMobile = isTouch ? ua.indexOf("android") > -1 ? ua.indexOf("mobile") > -1 : ua.indexOf("iphone") > -1 : false;

    if ( isMobile ) {
        document.getElementById("mobileLink").style.display = 'block';
        document.getElementById("browserLink").style.display = 'none';
    }
    else {
        document.getElementById("mobileLink").style.display = 'none';
        document.getElementById("browserLink").style.display = 'block';
    }
}

还有你的 HTML：

<div id="mobileLink">Feel free to give me a <a href="tel:1-408-555-5555">call</a</div>
<div id="browserLink">Feel free to give me a <a class='lightview' data-lightview-type="iframe" href="pages/call.html" data-lightview-options="width: 230, height: 101">call</a>.</div>
于 2012-11-07T00:08:48.993 回答
1

HTML：

<span class="flash-enabled">Feel free to give me a <a class='lightview' data-lightview-type="iframe" href="pages/call.html" data-lightview-options="width: 230, height: 101">call</a>.</span>
<span class="flash-disabled">Feel free to give me a <a href="tel:1-408-555-5555">call</a>.</span>

CSS：

.flash-disabled,
.flash-enabled {
    display: none;
}

查询：

$(document).ready(function() {
    if (FlashDetect.installed) {
        $('.flash-enabled').show();
        $('.flash-disabled').remove();
    } else {
        $('.flash-disabled').show();
        $('.flash-enabled').remove();
    }
});

FlashDetect 答案的学分来自 Marat。

于 2012-11-07T13:47:01.127 回答