快速呼叫按钮，用于手机上的响应式站点

Question

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

事先得到很多赞赏。

Answer 1

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

@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

Answer 2

@仅媒体屏幕和（最小宽度：600像素）{

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

            display: none;

            max-height: 0;

            overflow: hidden;
        }

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