我可以使用媒体查询来检测设备是否可以拨打电话吗？答案

【问题标题】：Can I use media queries to detect whether a device can make phone calls?我可以使用媒体查询来检测设备是否可以拨打电话吗？
【发布时间】：2015-07-15 20:19:02
【问题描述】：

好的，让我具体说一下：我不想根据屏幕尺寸来确定这一点，因为具有更大更好视口的新移动设备一直在问世。另外，我很沉默to use JavaScript to detect this，因为许多移动设备仍然无法支持它（是的，我在看你，iOS Safari & Opera Mini）

在我看来，CSS3 媒体查询应该有一个参数来检测所使用的媒体是手机、平板电脑还是 PC，这似乎很明显。有谁知道那可能是什么？

我问的原因是，在将我的网站转换为 Google 规定的 RWD 时，我想使用 CSS 显示一个按钮，该按钮仅通过手机调用我的业务，但一个按钮链接到 PC 上的“联系我们”页面.作为一个理论纯粹主义者/数学家，我不想提供与 PC 页面不同的移动网站页面。我希望通过纯 CSS 将所有内容统一在 RWD 的神格之下。

非常感谢您幽默我的完美主义并尽其所能做出贡献。 :) 黛比

【问题讨论】：

没有浏览器试图阻止这种用户指纹识别的事情。我也不相信你应该假设人们只想给你打电话，当我在没有直接电话功能的任何设备上打开 tel: 链接时，它仍然会打开一些东西（在我的情况下是 Skype），并且由于协议它无论如何都知道如何处理这些数据。否则你可以只检查媒体查询，我猜。

标签： css responsive-design media-queries

【解决方案1】：

没有直接的纯 CSS 方法来检测设备是否可以拨打电话。但是，这些设备通常是直立放置的，因此您可以使用orientation:portrait 媒体查询来定位它们。请记住，这种方法可能会在某些平板电脑或其他设备上产生一些误报，因此您可能也应该添加宽度限制。以下是可能对您有用的方法：

@media only screen and (orientation: portrait) and (max-width: 479px){
  /* place your css here */
}

这是一个方便的 CSS3 媒体查询指南：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

【讨论】：

【解决方案2】：

这可能会产生一些误报和漏报。一般手机都有触摸屏pointer: coarse，不具备hover: none功能。某些平板电脑无法拨打电话，但会在此处检测到，如果手机支持，您可以在手机上使用鼠标，这样就不会被检测为手机。

<html>
 <meta charset="utf8">
 <head>
   <style>
     @media (hover: none) and (pointer: coarse) {
       .has-phone {
         display: block;
       }
      .has-no-phone {
         display: none;
       }
      }
     @media (hover: hover) and (pointer: fine) {
       .has-phone {
          display: none;
        }
       .has-no-phone {
          display: block;
        }
      }
   </style>
 </head>
 <body>
    <a href="#" class="has-phone">Call US</a>
    <a href="#" class="has-no-phone">Contact US</a>
  </body>
</html>

【讨论】：

【解决方案3】：

很遗憾，没有。没有媒体查询值可以检测设备是否可以拨打电话，即使有，它也可能并不总是准确或会给您带来意想不到的副作用。比如我的桌面浏览器可以通过谷歌语音拨打电话，但是如果点击联系人启动GV拨打电话我会诅咒你到天涯海角。

使用手持设备不起作用，因为并非所有手机都将自己标识为手持设备（实际上大多数 id 都是屏幕），有些平板电脑也可以。

最终，如果这两个点击选项是必须的，而 JavaScript 是必须的，那么对于最准确（尽管您注意到，并非 100% 准确）选择手机与其他手机的最佳选择是使用尺寸查询。

综上所述，我认为如果您进一步调查，您可能会找到一种设计解决方案，可以以优雅的方式适应这两种用例。在不同情况下使用不同的按钮可能会令人沮丧 - 特别是对于通过不同媒体访问网站并期望保持一致性的用户而言。

【讨论】：