This article will help us to Detecting iOS (both <12, and 13+) and this sets the variable isIOSDevice to true or false i.e.
this.isIOSDevice = this.detectIOS();
//return true or false
See
the Example 1 in detail,
export
class NavMenuComponent
{
isIOSDevice= false;
constructor(private router: Router) {
}
ngOnInit() {
// return true if iOS
devices otherwise false
this.isIOSDevice
= this.detectIOS();
}
detectIOS() {
var
isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
var isAppleDevice = navigator.userAgent.includes('Macintosh');
var isTouchScreen = navigator.maxTouchPoints >= 1; // true for iOS 13 (and hopefully beyond)
return
isIOS || (isAppleDevice && (isTouchScreen || this.iOS1to12quirk()));
}
iOS1to12quirk() {
var
audio = new Audio(); //
temporary Audio object
audio.volume = 0.5; //
has no effect on iOS <= 12
return
audio.volume === 1;
};
}
For HTML Page: If page
render on iOS devices this link will be display otherwise not display
<li
class="nav-item" [routerLinkActive]="['link-active']"
*ngIf="isIOSDevice" (click)="toggleMobile()">
<a
class="nav-link" [routerLink]="['/ask-me]">Ask
Me on Code-Sample.com</a>
</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', // <home></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.
}
...
}
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
