手机上响应式站点的快速呼叫按钮答案

【问题标题】：Quick Call button for responsive site on mobile phone手机上响应式站点的快速呼叫按钮
【发布时间】：2016-10-22 12:12:19
【问题描述】：

我正在构建一个单页响应式网站，想知道如何在用户在手机上查看网站时添加快速呼叫按钮，同时在台式机或平板电脑上查看时将其隐藏。

提前非常感谢。

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以通过选择按钮消失的specific window size 来使用 CSS media queries 实现该效果：

@media (min-width: 961px) {
  .button-call {
    display: none;
  }
}

您可以使用min-device-width 而不是min-width 来定位物理屏幕分辨率。

有关按钮本身，请参阅How to trigger a phone call when clicking a link in a web page on mobile phone

【讨论】：

【解决方案2】：

@media only screen and (min-width:600px) {

        .hide-on-desktop, * [aria-labelledby='hide-on-desktop'] {

            display: none;

            max-height: 0;

            overflow: hidden;
        }

只需确保您的按钮具有 .hide-on-desktop 类...

【讨论】：