javascript - 仅针对 iOS 平板的纵向和横向模式隐藏下载按钮

我的“下载待处理订单”按钮在iOS平板上无法正常工作。我如何只在iOS平板上隐藏此按钮？目前，我的设置会对所有平板都隐藏该按钮。

我在我的 HTML 中创建了一个 id，并在我的 CSS 中设置了 display:none;。

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平板隐藏（纵向模式和横向模式）。然而，它会在除横向模式外的所有平板设备上隐藏。

答案＃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";
}

答案＃2

你可以在 PHP 中像这样检查你的用户代理是否是 iPad，然后决定是否生成按钮的 HTML。这样按钮就不会在 iOS 设备上显示。

$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");

if( $iPod || $iPhone || $iPad ){
    echo '<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>';

        }else{
            echo 'No button here ;-)';
        }