Hide Download button for ios Tablet only Portrait and landscape mode

Question

My download pending order button isn't functioning properly on ios tablets. How do I hide this button on ios tablets only? Currently, how I have it setup its hides for any tablet.

I've created an id in my html and did an display:none; in my 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;
  }
}

I expected to hide for ios tablets only accounting for (portrait mode and landscape mode). However, it hides for all tablet devices except in landscape mode.

if you want to hide only for ios device/ tablet you must check the user agent — Sfili_81, Apr 30 '19 at 15:06
if you search here on SO you will find a lot of question like this : [https://stackoverflow.com/questions/6127494/check-string-and-user-agent](https://stackoverflow.com/questions/6127494/check-string-and-user-agent) — Sfili_81, Apr 30 '19 at 15:18

Bedir · Accepted Answer · 2019-04-30T15:43:37.930

1

You can do this with 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
}

This works for other devices as well. Just change the if statement:

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

edited Apr 30 '19 at 15:43

answered Apr 30 '19 at 15:30

Bedir

476
1
6
17

how would I write this in typescript? – James Apr 30 '19 at 18:57

Arno Visser · Answer 2 · 2019-05-03T12:13:43.390

You can check if your user agent is an iPad in PHP like this and then generate the html for your button or not. This way the button is not shown on iOS devices.

$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 ;-)';
        }

Hide Download button for ios Tablet only Portrait and landscape mode

2 Answers2