Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Detect if device is iOS 13/14 - Angular 8, 9, 10, 11, and 12.x

This article will help us to Detecting iOS (both isIOSDevice to true or False i.e.

this.isIOSDevice = this.detectIOS(); //return true or false

See the Example 1 in detail,

exportclass NavMenuComponent{ 

isIOSDevice= false;

constructor(privaterouter: Router) {

}

ngOnInit() {

     // return true if Ios Devices otherwise false

    this.isIOSDevice = this.detectIOS();

  }

  detectIOS() {

    varisIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);

    varisAppleDevice = navigator.userAgent.includes('Macintosh');

    varisTouchScreen = navigator.maxTouchPoints >= 1; // true for iOS 13 (and hopefully beyond)

    returnisIOS || (isAppleDevice && (isTouchScreen || this.iOS1to12quirk()));

  }

  iOS1to12quirk() {

    varaudio = new Audio(); // temporary Audio object

    audio.volume = 0.5; // has no effect on iOS

    returnaudio.volume === 1;

  };

}

For HTML Page: If page render on iOS devices this link will be display otherwise not display

liclass="nav-item" [routerLinkActive]="['link-active']"*ngIf="isIOSDevice" (click)="toggleMobile()">

     aclass="nav-link" [routerLink]="['/ask-me]">Ask Me on Code-Sample.coma>

li>

See the Example 2 in detail,

We can also get using the ngx-device-detector. The Latest version available for each version of Angular (>= 12.x)

An Angular 6+ powered AOT compatible device detector that helps to identify browser, os and other useful information regarding the device using the app. The processing is based on user-agent.

Install: > npm i ngx-device-detector

Import: > Import Device Detector Service in you component i.e.

import { Component } from '@angular/core';

  ...

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

  ...

@Component({

  selector: 'home',  //

  styleUrls: ['./home.component.scss'],

  templateUrl: './home.component.html',

  ...

  })

export class HomeComponent {

  deviceInfo = null;

    ...

  constructor(..., private http: Http, private deviceService: DeviceDetectorService) {

    this.epicFunction();

  }

    ...

  epicFunction() {

    console.log('hello `Home` component');

    this.deviceInfo = this.deviceService.getDeviceInfo();

    const isMobile = this.deviceService.isMobile();

    const isTablet = this.deviceService.isTablet();

    const isDesktopDevice = this.deviceService.isDesktop();

    console.log(this.deviceInfo);

    console.log(isMobile);  // returns if the device is a mobile device (android / iPhone / windows-phone etc)

    console.log(isTablet);  // returns if the device us a tablet (iPad etc)

    console.log(isDesktopDevice); // returns if the app is running on a Desktop browser.

  }

    ...

}





This post first appeared on Programming, please read the originial post: here

Share the post

Detect if device is iOS 13/14 - Angular 8, 9, 10, 11, and 12.x

×

Subscribe to Programming

Get updates delivered right to your inbox!

Thank you for your subscription

×