javascript函數根據手機瀏覽器隱藏和顯示超鏈接？

我正在創建一個針對所有移動平臺（i-phone，i-pad，Blackberry，android e.t.c）的移動網站。javascript函數根據手機瀏覽器隱藏和顯示超鏈接？

<div data-role="header" data-position="inline"> 
    <a href="index.html" data-role="button" data-icon="home"></a> 
    <div id="title">Venue Information</div></div>

上面寫的代碼是整個網站的標題的一小段代碼。正如上面提到的，我想知道是否有可能隱藏中間行是一個按鈕圖標（超鏈接到index.html），如果它正在I-Phone和Blackberry上運行，並顯示相同的，如果任何其他平臺（機器人，桌面等）

任何代碼片段將高度讚賞。

mrana ....

來源

2012-03-12 mrana

我不是在移動支持的專家，但我認爲，導航器對象可以幫助（例如'window.navigator.platform'） – user544262772 2012-03-12 08:33:40

你爲什麼要這麼做？爲什麼選擇iphone和黑莓？如果你告訴我們爲什麼，也許有更好的解決方案。在大多數情況下，瀏覽器/平臺嗅探並不是最好的主意。 – kapa 2012-03-12 08:57:58

其實我們正在爲手機，黑莓和其他移動平臺/桌面（WEB-Version）創建移動應用程序。所以我的任務是爲該應用創建移動頁面。我們在每個平臺上使用這些頁面。所以我的問題是，如果我在黑莓和iphone上使用這些頁面，那麼總是會在每個頁面標題上有一個超鏈接到index.html，如果用戶點擊他/她從本地平臺（BB，Iphone ）我不想要。我也不能刪除這個，因爲這是在Web應用程序中所需要的。 – mrana 2012-03-12 09:17:53

DEMO

$(document).ready(function() { 
    var supportedMobile = navigator.userAgent.match(/iphone|blackberry|playbook/i); 
    if (supportedMobile) { 
     $("a[data-role='button']").html("You have a(n) "+supportedMobile); 
     if (supportedMobile!="BlackBerry") $("a[data-role='button']").fadeOut('slow'); 
     else $("a[data-role='button']").hide(); // BB does not fade on my 5700 
    }  
});

來源

2012-03-12 10:06:22 mplungjan

我試過，但你的代碼不工作..任何想法？ – mrana 2012-03-12 10:38:59

對不起，再次無法正常工作。你有沒有自己檢查過這個代碼？ – mrana 2012-03-12 11:59:23

是的，我做到了。 BB不會褪色，所以現在我隱藏起來。查看已更新的[DEMO]（http://plungjan.name/iphone_bb.html） – mplungjan 2012-03-12 13:02:09

有針對特定類型的問題的一小片天：

http://detectmobilebrowsers.com/

編輯原因的第一個評論下方：

好，所以如果你看看jQuery代碼示例，你可以看到： navigator.userAgent || navigator.vendor || window.opera）;

，如果你谷歌，你會得到：

http://www.quirksmode.org/js/detect.html

編輯2：更可見代碼

使用下面的代碼獲取瀏覽器支持：

if(navigator.userAgent.match(/Android/i) || 
navigator.userAgent.match(/webOS/i) || 
navigator.userAgent.match(/iPhone/i) || 
navigator.userAgent.match(/iPod/i) || 
navigator.userAgent.match(/BlackBerry/) 
){ 
// some code 
}

享受！

來源

2012-03-12 08:37:24

很酷的網站，但不是針對上述問題。該網站上的代碼不容易破解，只能檢測到許多 – mplungjan 2012-03-12 08:56:46

Overkill中的2個。看我的例子 – mplungjan 2012-03-12 10:59:40

這是一個更廣泛的答案，所以它不是矯枉過正，它只是不那麼具體，與附加的資源，它告訴更廣泛的受衆 – 2012-03-12 11:03:25

如果情況適合，你可以隱藏的鏈接，如果用戶的屏幕尺寸太小：

<style> 
@media screen and (max-device-width: 480px) { 
.hideifsmall {display: none} 
} 
</style> 

<a href="index.html" class="hideifsmall" data-role="button" data-icon="home"></a>

來源

2012-03-12 08:54:58

謝謝，但有點不合邏輯。 – mrana 2012-03-12 08:59:55

javascript函數根據手機瀏覽器隱藏和顯示超鏈接？

回答

相關問題