Safari网页开发相关配置

主屏图标

您可能希望用户能够将您的Web应用程序或网页链接添加到主屏幕。 这些由图标表示的链接称为Web Clip。 按照这些简单的步骤指定一个图标来代表您在iOS上的Web应用程序或网页。

<link rel="apple-touch-icon" href="/custom_icon.png">

要为不同的设备分辨率指定多个图标(iPhone和iPad设备)，请为每个链接元素添加size属性，如下所示：

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

启动屏幕图像(PWA应用)

<link rel="apple-touch-startup-image" href="/launch.png">

启动图标标题

在 iOS上，可以为启动图标指定Web应用程序标题。默认为网页<title>的内容。

<meta name="apple-mobile-web-app-title" content="AppTitle">

隐藏Safari用户界面组件

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

修改状态栏

如果content设置为default，状态栏显示正常。 如果设置为black，则状态栏的背景为黑色。 如果设置为black-translucent，则状态栏为黑色半透明。 如果设置为默认或黑色，则Web内容将显示在状态栏下方。 如果设置为黑色半透明，则Web内容将显示在整个屏幕上，部分被状态栏遮挡。 默认值为default。

<meta name="apple-mobile-web-app-status-bar-style" content="black">