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

Question

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

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

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

非常感谢您对我的完美主义的包容，并尽我所能做出贡献。:)黛比

Answer 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