在移动设备上显示缩写和首字母缩写

我经常在我的网站上使用缩写标签。但我注意到这个标签在移动/平板设备（触摸设备）上不起作用。所以我的问题是：我如何才能让它发挥作用？

我在互联网上搜索了一些解决方案，但它们并不完全有用：

解决方案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')); }); }); }

没有一个是完全令人满意的！因此，我们非常感谢一些替代方案！

2016年，我的搜索结果是一样的。但我最终找到了一个简单的解决方法：我决定使用工具提示而不是警报。

这个例子是针对jQuery&引导工具提示。

因此，在解决方案2中，在您检测到移动设备后（按您的意愿进行）：

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

感谢这个家伙。https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/

以下是这个问题的CSS解决方案。

<style>
@media screen and (min-width: 0px) {
    abbr[data-title] {
        position: relative;
        /* ensure consistent styling across browsers */
        text-decoration: underline dotted;
    }
    abbr[data-title]:hover::after,
    abbr[data-title]:focus::after {
        content: attr(data-title);
        /* position tooltip like the native one */
        position: absolute;
        left: 0;
        bottom: -30px;
        width: auto;
        white-space: nowrap;
        /* style tooltip */
        background-color: #1e1e1e;
        color: #fff;
        border-radius: 3px;
        box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
        font-size: 14px;
        padding: 3px 5px;
    }
}
</style>

abbr标签的title属性将导致重复问题，这就是为什么我们可以用data-title更改title属性，并将解决重复问题。为了在任何尺寸上使用此功能，我保留了min-width到0px

我们可以在手机屏幕或电脑屏幕上点击abbr标签，它将以相同的方式工作，不会有任何重复。我在Chrome上试用过，效果很好。

相关内容

最新更新

热门标签：