Question

好吧，让我具体一点：我不希望以屏幕大小为基础，因为具有更大更好视口的新移动设备一直在出现。此外，我非常沉默to use JavaScript to detect this，因为许多移动设备仍然无法支持它（是的，我正在看你，iOS Safari & Opera Mini）

我觉得CSS3媒体查询应该有一个参数来检测所使用的媒体是手机，平板电脑还是PC。有谁知道那可能是什么？

我问的原因是，在将我的网站转换为Google强制性RWD时，我想使用CSS显示一个只能通过手机拨打我公司业务的按钮，但是一个链接到PC上“联系我们”页面的按钮。作为理论上的纯粹主义者/数学家，我不希望提供与PC页面不同的移动网站页面。我希望它通过纯粹的CSS在RWD的Godhead下统一。

非常感谢你为我的完美主义做出贡献并尽可能地做出贡献。 :) 戴比

Answer 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

Answer 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>

Answer 3

不幸的是，没有。没有媒体查询值可以检测设备是否可以进行呼叫，即使有，也可能不会总是准确或者会给你带来意想不到的副作用。例如，我的桌面浏览器可以通过Google Voice拨打电话，但如果点击联系人启动GV拨打电话，我会诅咒你到地球的尽头。

使用掌上电脑无法正常工作，因为并非所有手机都将自己标识为手持设备（实际上大部分都是屏幕），而且有些平板电脑也可以。

最终，如果两个点击选项是必须的并且javascript是必须的，那么对于最准确的（尽管你注意到，但不是100％准确）手机与其他选择的最佳选择是使用大小查询。

所有这些都说，我认为如果你进一步调查，你可能会找到一个能够以优雅的方式适应这两种用例的设计解决方案。在不同的环境中使用不同的一个按钮可能会令人沮丧 - 特别是对于在不同媒体上访问该网站并期望一致性的用户。

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

3 个答案: