如何在移动设备上显示系统共享按钮？并在相同条件下隐藏桌面共享按钮答案

【问题标题】：How to show system share button on mobile device? And hide desktop share buttons on same condition如何在移动设备上显示系统共享按钮？并在相同条件下隐藏桌面共享按钮
【发布时间】：2021-04-04 23:31:30
【问题描述】：

我正在编写响应式网站，使用 Google Amp 脚本，但没有 ⚡ 登录 html 标记。这允许在不使用 google cdn 的情况下加快站点速度，而且我也违反了一些 amp 规则，例如使用 js。它确实加快了使用谷歌脚本的速度，即使不是正确的。手机外观的分享按钮如下：（仅在手机上出现）

<amp-social-share type="system" width="36" height="36" id="shareLink" style="float: right;">
        <amp-img src="/i/Share-128.png"  width="36" height="36" style="float: right;"></amp-img>
</amp-social-share>

如何隐藏其他分享按钮块，取决于设备而不是屏幕宽度？上面的代码与我需要的相反。分享按钮出现在移动设备上，但不在桌面上。由于此系统共享按钮，它在移动设备上提供了更强大的功能。

我在 css 中使用媒体查询，但仅使用大小参数来使网站响应。

寻找与所有现代浏览器兼容的 javascript 或 css 解决方案。 另外，我很感兴趣，如何在没有 google-amp 的情况下制作系统共享按钮。

【问题讨论】：

标签： javascript html css amp-html

【解决方案1】：

Demo你可以使用ngx-devie-detector

安装后导入组件

  import { DeviceDetectorService } from 'ngx-device-detector';

然后你就可以得到设备的信息了

deviceInfo = null;
  constructor( private deviceService: DeviceDetectorService){
    this.deviceInfo = this.deviceService.getDeviceInfo();
    console.log(this.deviceInfo)
  }

最后你可以使用 ngIf 或使用 class 和 css 隐藏或显示

【讨论】：