AMP: Building Accelerated Mobile Pages

Fullscreen maps

In the last example, we used a fixed height iframe. It's often useful to have a fullscreen map to make the most of the small screens on mobile devices. This means we need a fullscreen iframe.

One way to achieve this is to set CSS height to 100vh (100 percent viewport height). This is problematic, however, because mobile devices hide (Android) or shrink (iOS) the address bar when the user scrolls down. This means that the viewport height changes slightly, making things tricky when sizing the map. So if we use CSS height: 100vh; then the browser includes the address bar in the height. So on initial load, the bottom of the map will be truncated until the user scrolls, and then the address bar disappears, and the map moves up ...