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

Question

我正在使用 HTML、SCSS、JS 和 Rails 对 Web 应用程序进行硬编码，以预览我正在处理的应用程序的设计。我想在 iPhone 上预览设计，但我想让它看起来像本机应用程序。换句话说 "no Safari navbar or footer".

我在我的 MacBook 上是运行本地主机，然后我使用 IP 地址在我的 iPhone 上使用 Safari 预览它。

我添加了以下元标记
已将 Web 应用程序添加到 iPhone 的主屏幕 "Add to Home Screen"
通过单击 iPhone 主屏幕上现在的图标启动了 Web 应用程序，我仍然看到导航栏和页脚。

如果这有帮助，顶级容器设置为 100% 高度并且主页上没有滚动。

   <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

为此，您应该将您的网站添加到主屏幕。

然后将其作为本机应用程序打开（转到主屏幕并点击应用程序图标）。

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

How can I preview a web app design on an iPhone and make it look like a native application?

html

mobile-safari

ios

responsive-design