仅适用于 ios 平板电脑的隐藏下载按钮纵向和横向模式答案

【问题标题】：Hide Download button for ios Tablet only Portrait and landscape mode仅适用于 ios 平板电脑的隐藏下载按钮纵向和横向模式
【发布时间】：2019-09-19 06:49:58
【问题描述】：

我的下载挂单按钮在 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 平板电脑仅占（纵向模式和横向模式）。但是，除横向模式外，它对所有平板设备都隐藏。

【问题讨论】：

如果您只想隐藏 ios 设备/平板电脑，您必须检查用户代理
@Sfili_81 我将如何检查我的用户代理？
如果你在这里搜索 SO 你会发现很多这样的问题：https://stackoverflow.com/questions/6127494/check-string-and-user-agent

标签： javascript css typescript

【解决方案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 ;-)';
        }

【讨论】：