How to hide the navigation & status bar on mobile (iOS)
If you are prototyping for mobile you may want to hide the navigation or status bar for a full screen experience.
You can simulate an app experience with your Framer site on your iOS Phone by using the prototyping component or custom code.
Prototyping Component
The prototype component has the code described below integrated into it, so you can hide the iOS Safari UI elements without any further configuration just by using it. Simply add the prototype component to your webpage from the insert menu, load your prototype and set the device to none.
Once saved and published, you can see the effect by opening the site URL on your phone, tapping the sharing options and selecting Save to Home Screen. You will now find a new icon on your home screen, and if you launch it, iOS will treat your site as an app. Read this thread to learn how to customise the app icon.
Custom Code
Apple provides a few special meta tags to control how Safari handles the navigation and status bars on mobile. You can simply paste these in the custom code input at the end of the <head> element.
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Once saved and published, you can see the effect by opening the site URL on your phone, tapping the sharing options and selecting Save to Home Screen. You will now find a new icon on your home screen, and if you launch it, iOS will treat your site as an app. Read this thread to learn how to customise the app icon.
If you want to completely disable scrolling you can use the snippet below:
<meta name="viewport" content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
