基于网页宽度的网页切换?

在任何管理员决定把这个问题记下来或者关闭它之前,我想说的是,我已经在互联网上下搜索和StackOverflow做了我应有的努力,但仍然没有找到解决我问题的解决方案。

我只想打开/关闭超链接我的电话号码在网页或主页根据浏览器的宽度使用CSS和媒体查询。如果网页在桌面上打开或浏览器宽度更宽,则 电话 链接将被禁用只留下电话号码作为纯文本。如果网页是在小型设备(如智能手机)上打开的,或者浏览器的宽度非常短(如400px),则 链接应启用或激活。

我在这个网站上看到了一个答案,上面写着我想做的事情。我把它一个字一个字地复制,然后粘贴到我的CSS和HTML页面中,如下所示。

<a class="moblink" href="tel:123456789" title="Call Me">123456789</a>

CSS

@media screen and (min-width: 500px) { /* W/E width you call "Mobile" */
            .moblink {
                color: inherit;
                text-decoration: none;
                pointer-events: none;
            }
        }

这个代码有效。然而,它的工作方向相反。换言之,如果您在桌面上打开我的网页,电话链接将启用或处于活动状态,允许用户单击电话号码本身。如果你在你的智能手机上打开我的网页,电话链接将被禁用或不活动。这正是我想做的,但在另一个方向。电话链接在智能手机或更小的设备上处于活动状态,当我的网页在桌面上打开时处于非活动或禁用状态。

任何帮助、提示或线索将不胜感激。谢谢。