移动 Safari 媒体查询问题

Question

所以我正在尝试进行基本的电话号码交换，以便该号码可以在移动设备上点击，但不能在桌面设备上点击。

我一直在使用以下代码（主要针对 iphone）：

CSS

#phone .mobile {
    display: none;
}

@media only screen and (max-device-width: 640px) and (min-device-width: 320px) {

    #phone .mobile {
        display: inline;
    }

    #phone .desktop {
        display: none;
    }

}

在头部（从 h5bp 使用）

<meta name="viewport" content="width=device-width, initial-scale=1">

Chrome 和 Opera mini 工作正常，但 Safari 显示两个数字。 我注意到 Safari 使所有电话号码都可以点击。这可能与它有关吗？

Answer 1

你可以用一些 javascript/jquery 来实现这一点

1) 检查窗口宽度 2）如果这超过一定数量的像素，那么您可以输出不带href的链接，否则添加您的电话：39000000或其他：）

Ciao 法比奥