javascript - 隐藏仅适用于 iOS 平板电脑的下载按钮纵向和横向模式

Question

我的下载挂单按钮在 iOS 平板电脑上无法正常工作。如何仅在 ios 平板电脑上隐藏此按钮？目前，我如何让它为任何平板电脑设置它的隐藏。

我在我的 html 中创建了一个 id 并做了一个 display:none;在我的CSS中。

HTML

<div id="hide-download">
  <app-button name="download"
              classAttr="btn-primary"
              (click)="downloadFile()"
              [disabled]="!allOrders || allOrders.length === 0">
    <i class="fas fa-download button-icon-padding"></i>
    Download
  </app-button>
  <a class="hidden" #download></a>
</div>

CSS

@media screen and (max-width: 768px) {
  #hide-download {
    display:none;
  }
}

我希望仅针对 ios 平板电脑隐藏(纵向模式和横向模式)。但是，除横向模式外，它对所有平板电脑设备都是隐藏的。

Answer 1

您可以使用 JavaScript 执行此操作:

if (navigator.userAgent.match(/(iPad)/)) {
    document.getElementById("hide-download").style.display = "none";
} else {
    document.getElementById("hide-download").style.display = "initial";//or whatever it is supposed to be
}

这也适用于其他设备。只需更改 if 语句:

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    document.getElementById("hide-download").style.display = "none";
} else {
    document.getElementById("hide-download").style.display = "initial";
}