让你的 PWA 在 iOS 上看起来更美观

我谈论了如何利用凹口让您的 PWAs 覆盖 iOS 设备上的整个屏幕。

问题

为了避免内容被刘海屏隐藏，苹果默认限制了 PWA 的视口：

Apple 还将没有凹口的iPhone 和 iPad 上的视口限制在状态栏下方的区域：

如果您希望 PWA 能够接受缺口并使其覆盖整个屏幕，那么您将需要进行一些小改动。

解决方案

将文档设置为流向缺口区域：



// index.html

<head>
  ...
  <meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width"></meta>
  <meta name="apple-mobile-web-app-capable" content="yes"></meta>
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"></meta>
  ...
</head>

请注意，这会将 iOS 状态栏的字体颜色设置为白色。

技巧：将文档的最小高度设置为 100% 加上顶部安全区域的高度。这样可以避免由于将文档“向上”移动而导致底部出现白条。

此外，在所有 4 个侧面添加安全区域填充，以确保无论设备方向如何，内容都不会隐藏在凹口下：



/* styles.css */

html {
  min-height: calc(100% + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  ...
  background-attachment: fixed;
  background-image: url('/bg.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

结果

额外提示

如果您有带有安全区域填充的元素position: fixed（例如，消息框、侧边栏、底部导航等），请为其容器或自身添加安全区域填充（以相关者为准）。您只需在可能放置刘海的侧面添加填充即可。



/* styles.css */

.left-sidebar {
  padding: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);
}

对于固定标题，您可以选择在凹口区域下方显示标题（如Share By Cam所做的那样）或填充标题的相关边而不是 html 来填充凹口区域。

很久以前，我在 iOS 12 上尝试了好几次后，开发出了这个 hack，但一直没分享，希望苹果能修复它。看来这个怪癖会一直存在，就这样吧。干杯！

向MockUPhone致敬，它是一款出色的手机模拟工具！

鏂囩珷鏉ユ簮锛�https://dev.to/karmasakshi/make-your-pwas-look-handsome-on-ios-1o08