CSS 如何在手机默认Safari浏览器中打开外部链接

在本文中，我们将介绍如何使用CSS在手机上默认的Safari浏览器中打开外部链接，而不是在应用程序浏览器（in app browser）中打开。

阅读更多：CSS 教程

什么是PWA（Progressive Web Apps）

在了解如何在手机默认Safari浏览器中打开外部链接之前，我们先简要介绍一下PWA（渐进式Web应用程序）的概念。PWA是一种使用现代Web技术来构建具有原生应用程序体验的Web应用程序的方法。它可以在桌面和移动设备上运行，并且可以被添加到主屏幕以像原生应用一样访问。

PWA应用程序可以像普通的Web页面一样通过URL访问，所以默认情况下，外部链接在手机上会在应用程序浏览器中打开。然而，有时我们希望在默认Safari浏览器中打开外部链接，因为它可以提供更好的用户体验和功能。

使用CSS指定链接在默认Safari中打开

要让链接在默认的Safari浏览器中打开，我们需要使用一些CSS样式。首先，我们需要为链接添加一个特殊的class，例如external-link，然后使用下面的CSS代码：

a.external-link {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  pointer-events: auto;
}

上述CSS代码中的-webkit-touch-callout和-webkit-user-select属性是为了禁止长按链接后默认的菜单和选择文本操作。-khtml-user-select、-moz-user-select和-ms-user-select属性是为了兼容不同浏览器厂商的前缀。user-select属性控制文本是否可以被选择，而cursor属性和pointer-events属性是为了提供点击链接的可视反馈。

另外，我们还可以为链接添加一个target='_blank'属性，这将强制链接在新的标签页中打开，而不是在当前页面中打开。

下面是一个示例链接的HTML代码：

<a href="https://www.example.com" class="external-link" target="_blank">打开外部链接</a>

通过上述CSS和HTML代码，链接将在手机默认的Safari浏览器中打开，而不是在应用程序浏览器中打开。

PWA中的链接打开方式

在PWA应用程序中，如果你希望所有的链接都在默认Safari浏览器中打开，而不是在PWA中打开，可以使用下面的代码：

<meta name="apple-mobile-web-app-capable" content="yes">

这将告诉iOS设备将链接打开到默认Safari浏览器中，而不是在PWA中打开。

总结

通过使用CSS样式和HTML属性，我们可以在手机默认的Safari浏览器中打开外部链接。无论是在PWA应用程序中还是普通的Web页面中，你都可以使用上述方法来控制链接的打开方式。这样能够提供更好的用户体验，并充分利用Safari浏览器的功能。

希望本文对你理解如何在手机默认Safari浏览器中打开外部链接有所帮助。感谢阅读！

参考链接：
– PWA – MDN Web Docs