在移動設備上顯示縮寫和縮寫

我經常在我的網站上使用abbr（以前稱爲首字母縮寫詞）標記。但我注意到這個標籤在移動/平板設備（觸摸設備）上不起作用。所以我的問題是：我如何才能使它工作？在移動設備上顯示縮寫和縮寫

我在網上搜索了一些解決方案，但它們並沒有完全有用：

解決方案1：

abbr[title]:after 
{ 
    content: " (" attr(title) ")"; 
} 

@media screen and (min-width: 1025px) 
{ 
    abbr[title] 
    { 
     border-bottom: 1px dashed #ADADAD; 
     cursor:help; 
    } 

    abbr[title]:after 
    { 
     content: ""; 
    } 
}

解決方案2：

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { $('abbr').each(function() { $(this).click(function() { alert($(this).attr('title')); }); }); }

他們沒有完全滿意！所以，一些替代品非常感謝！

來源

2015-12-14 Cristian Manolache

所以沒有什麼？！我願意接受任何建議：D –

在這裏，在2016年，我的搜索結果是一樣的。但我結束了一個簡單的解決方法：我決定使用工具提示，而不是警報。

該示例用於jQuery & bootstrap tooltips。

所以，在解決方案2，您檢測移動（做到這一點，如你所願）後：

$('abbr').attr('data-toggle', 'tooltip'); // add atribute to all abbrs 
$('[data-toggle="tooltip"]').tooltip(); // initialize tooltips on all abbrs

來源

2016-08-01 22:48:44 voznik

在移動設備上顯示縮寫和縮寫

回答

相關問題