CSS 帮助 - 尝试使菜单项在移动设备上可点击，但在 PC 上不可点击

Question

基本上我在这个网站上工作 - www.docksteaderlending.ca

我不是开发人员，但我有基本的 css 和 html 知识。

客户想要一个简单的单页网站，没有其他页面。但希望在顶部标题中显示立即申请按钮、电子邮件和电话号码。我通过在 wordpress 菜单中使用自定义链接并链接到 mailto:xxx 和 tel:xxx

客户回来了，说他不喜欢你不能突出显示和复制文本(不喜欢它会自动打开一个邮件客户端)。

我想做的是使文本可选择，我通过添加以下 css 设法做到了这一点:

.unclickable > a:hover { 指针事件:无； 游标:默认； }

它起作用了，尽管它有点弄乱了光标。但是，我意识到问题是移动的。这些链接不可点击，但您也无法在移动设备上选择它们。

我试过使用用户选择，但它似乎没有做任何事情。这是我在下面使用的代码:

    .selectable p {  
  -webkit-user-select: all;  /* Chrome all / Safari all */
  -moz-user-select: all;     /* Firefox all */
  -ms-user-select: all;      /* IE 10+ */
  user-select: all;          /* Likely future */   
  }

理想情况下，我想做的是让链接既可以点击又可以选择，这似乎是最简单的解决方案，允许用户选择，同时允许移动功能。但我已经达到了我的知识极限，谷歌似乎没有帮助。

感谢任何帮助。如果您查看该网站，我将电子邮件地址保留为不可点击的类，而电话号码没有额外的 css 类(字体很棒的图标除外，但那是无关紧要的)

Answer 1

我可能会建议媒体查询，以便 .unclickable 类仅应​​用于移动浏览器宽度以上的设备

@media (min-width: 768px){
    .unclickable > a:hover {
    pointer-events: none;
    cursor: default;
}