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

Question

我正在使用 HTML、SCSS、JS 和 Rails 对 Web 应用程序进行硬编码，以预览我正在开发的应用程序的设计。我想在我的 iPhone 上预览设计，但我想让它看起来像一个原生应用程序。换句话说，“没有 Safari 导航栏或页脚”。

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

1. 我添加了以下元标记
2. 将网络应用添加到 iPhone 的主屏幕“添加到主屏幕”
3. 通过单击现在位于 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

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

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