Iphone/Android UI full screen responsive design issue with footer/header and scroll able content

### Issue type

**I'm submitting a ...** (check one with "x")

* [X ] bug report
* [ ] feature request
* [ ] question about the decisions made in the repository

### Issue description
https://www.akveo.com/ngx-admin/pages/dashboard (cosmic)

Footer is not show in the iphone. We have to manual move the browser to full screen mode.
Same issue is seen with header overlapping the scroll-able content when we move from full screen mode to normal mode. I have record the UI rendering issue in video.

https://drive.google.com/file/d/1rMpnYev0-HI578CXADGhJqHu3bYkf8G7/view?usp=sharing (UI issue reproduction step)

**Current behavior:**

**Expected behavior:**
screen should go to full screen when we scroll to footer or header.

**Steps to reproduce:**
a) footer issue
1) open https://www.akveo.com/ngx-admin/pages/dashboard (cosmic theam ) in iphone
2) scroll to footer.

2) header overlap issue
1) open https://www.akveo.com/ngx-admin/pages/dashboard (cosmic theam ) in iphone
2) go to full screen mode in iphone
3) go back to normal mode.
4) you will see the header is overlapping with scroll-able content

**Related code:**

A sample application via GitHub

https://www.akveo.com/ngx-admin/pages/dashboard