在移动设备上显示缩写和缩写

我经常在我的网站上使用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

在移动设备上显示缩写和缩写

回答

相关问题