logo标签列表

我能用媒体查询来检测设备是否能打电话吗？

cssresponsive-designmedia-queries
4
好的，让我具体说明一下：我不想基于屏幕尺寸来进行移动设备检测，因为新的移动设备拥有更大更好的视口尺寸，而且我也不太愿意使用JavaScript进行检测，因为很多移动设备仍然无法支持它（是的，我在看着你，iOS Safari和Opera Mini）。
对我来说，CSS3媒体查询应该有一个参数，可以检测所使用的媒体是否为手机、平板电脑或PC。有人知道这可能是什么吗？
我之所以问这个问题，是因为在将我的网站转换为Google强制要求的RWD时，我想使用CSS显示一个按钮，从移动电话直接拨打我的业务，但在PC上链接到“联系我们”页面。作为理论纯粹主义者/数学家，我不想服务于不同的移动站点页面和PC页面，我希望所有内容都集中在纯CSS的RWD神头之下。
非常感谢您容忍我的完美主义并尽可能地做出贡献。 :) 黛比
浏览器并没有试图防止这种用户指纹识别的事情。我也不认为你应该假设人们只想打电话给你。当我在任何没有直接电话功能的设备上打开一个 tel: 链接时，它仍然会打开某些东西（在我的情况下是 Skype），由于协议，它知道如何处理这些数据。否则，你可以检查媒体查询，我猜。 - somethinghere
3个回答
1

没有直接的 CSS-only 方法来检测设备是否可以拨打电话。然而，这些设备往往是竖立的，因此您可能可以使用 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
1
这可能会产生一些错误的正面和负面结果。通常手机具有触摸屏幕 指针：粗略，并且没有 悬停：无 的能力。有些平板电脑不能打电话，但在这里将被检测到，如果您的手机支持，您可以使用鼠标来操作它，这样它就不会被检测为手机。
<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>
0
很遗憾，没有媒体查询值可以检测设备是否能够打电话，即使有，它可能不总是准确的或会给您带来意想不到的副作用。例如，我的桌面浏览器可以通过Google Voice拨打电话，但如果点击联系人启动GV拨打电话，我会诅咒你到地球的尽头。
使用手持设备并不起作用，因为并非所有手机都将自己标识为手持设备（实际上大多数标识为屏幕），而且一些平板电脑也可能如此。
最终，如果两个点击选项是必须的，而JavaScript是禁止的，那么对于最准确（尽管如您所述，不是100％准确）的选择电话与其他设备，您最好使用大小查询。
话虽如此，我认为如果您进一步调查，可能会找到一个优雅的设计解决方案，可以同时容纳两种用例。在不同的上下文中以不同方式使用的一个按钮可能会令人沮丧，特别是对于在不同媒体上访问网站并期望一致性的用户。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接