2

Google Voice バッジを含む iframe を表示するために lightview を埋め込んだ Web サイトがあります。このバッジは 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 スクリプトに次のコードを追加することにより、Flash が使用可能な場合に始まる属性clickを持つすべてのリンクに、適切なイベント ハンドラーを動的にバインドできます。hreftel: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

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;
}

JQuery:

$(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 に答える
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 に答える