如何在iPhone上预览Web应用程序设计并使其看起来像本机应用程序？

Question

I'm hardcoding a web application using HTML, SCSS, JS, and Rails to preview the design for an application I'm working on. I'm want to preview the design on my iPhone but I want to make it look like a native app. In other words "no Safari navbar or footer".

I'm running localhost on my MacBook then I used the IP address to preview it on my iPhone using Safari.

1. I've added the following meta tags
2. Added the web app to the iPhone's home screen "Add to Home Screen"
3. Launched the web application by clicking on the icon that's now on the iPhone's home screen and I still see the navbar and footer.

If this helps, the top-level container is set to 100% height and there is no scrolling on the homepage.

   <meta name="apple-touch-fullscreen" content="yes" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />

Answer 1

To do so you should add your website to the home screen .

And then open it as a native application (go to home screen and tap on the application icon).