markdown Angular - 防止在Android中推送页脚

Posted 2021-05-06

# Angular - Prevent  Footer Being Pushed Up Android

[SOURCE](https://stackoverflow.com/a/35527852/1602807), [SOURCE](https://stackoverflow.com/a/45451974/1602807), 
[SOURCE](https://stackoverflow.com/a/38559158/1602807)

Footer with `fixed-bottom` will be pushed up when keyboard show in Android devices as the screen will be resized. Thus we actively listen for the `resize` event and hide the footer accordingly.

```html
<app-footer *ngIf="shouldShowFooter"></app-footer>
```

```typescript
shouldShowFooter = true;

@HostListener('window:resize', ['$event'])
onResize(event) {
    if (AgentUtil.isAndroidDevice()) {
        const height = event.target.innerHeight;
        // when keyboard shows on Android device, screen will be resize
        // thus we ned to listen for the resize event and hide the footer
        // to prevent footer being pushed up.
        this.shouldShowFooter = height >= 480;
    }
}

// For comprehensive list of OS see
// https://stackoverflow.com/a/38559158/1602807
export class AgentUtil {
    static isIOSDevice(): boolean {
        return /iPhone|iPad|iPod/i.test(navigator.userAgent);
    }
    static isAndroidDevice(): boolean {
        return /Android/i.test(navigator.userAgent);
    }
}
```