思路分享：
在iphone手机上，网站可以添加到主屏幕。
默认情况下，一个网站被添加到主屏幕时，默认显示的是网站截图，如何才能显示成我们自己想要设置的图标Logo和隐藏底部栏，让这个桌面网站看起来像个app呢？我在实际工作中遇到了这个需求，将实现步骤总结如下：
其实Apple通过在网页的head部分添加link标记，在Safari浏览器中我们可以轻易地将网站添加到iPhone的主屏幕，使它看起来就像一个普通的app一样。
image.png
image.png
image.png
那么，我们如何修改这个生成的Logo呢? 还有如何隐藏打开的这个App底部（也可以说是safari的底部）栏呢？
主要步骤：
在对应的网页的.html文件下，一般是命名为index.html文件下修改。
1.制作`4种不同尺寸的图片`，放在相应目录下(目录随便，但是要图片获取要对应的路径)：
<!--适用于 Retina 屏的 iPad-->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./static/apple-touch-icon-precomposed-144x144.png">
<!--适用于 Retina 屏的 iPhone-->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="./static/apple-touch-icon-precomposed-120x120.png">
<!--适用于非 Retina 屏的 iPad-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="./static/apple-touch-icon-precomposed-72x72.png">
<!--适用于非 Retina 屏的 iPhone-->
<link rel="apple-touch-icon-precomposed" href="./static/apple-touch-icon-precomposed-57x57.png">
2.vue项目中，需将4张图片放到static文件中
3.上面的代码位置：在index.html的<head></head>之间添加以上代码
4.部署上线
5.完成上述步骤后，在safari中打开网址
注意：apple-touch-icon和 apple-touch-icon-precomposed都可以，区别:
这里有apple-touch-icon属性的明显比使用apple-touch-icon-precomposed图标多出一个高光，因为在ios系统中对icon有一套规范，就是在ios设备的图标统一为“四边圆角”、“高光处理”，至于“图标阴影”，是ios设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式，由于在视觉上统一最重要的是形状的统一，所以“圆角”是必须的，但是对于“高光”苹果没有做出特别的强调，所以苹果设置当中把“高光”作为可选项，就产生了apple-touch-icon和 apple-touch-icon-precomposed属性。
使用apple-touch-icon属性为“增加高光光亮的图标”；
使用apple-touch-icon-precomposed属性为“设计原图图标”；
具体项目应用实操：
一：添加的图片Logo位置
image.png
二：在对应的index.html目录下添加代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="renderer" content="webkit">
<meta name="description" content="使用React、Redux、Immutable制作的俄罗斯方块" />
<meta name="keywords" content="俄罗斯方块,Tetris,React,Redux,Immuatble,JavaScript">
<meta name="format-detection" content="telephone=no"/>
<meta content="yes" name="apple-touch-fullscreen">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="white" name="apple-mobile-web-app-status-bar-style">
<link id="J_desktopIcon" sizes="114x114" rel="apple-touch-icon-precomposed" href="image.jpeg">
<script>;(function(){var w=parseInt(window.screen.width),s=w/640,u=navigator.userAgent.toLowerCase(),m='<meta name="viewport" content="width=640,';if(/android (\d+\.\d+)/.test(u)){if(parseFloat(RegExp.$1)>2.3)m+='minimum-scale='+s+',maximum-scale='+s+',';}else{m+='user-scalable=no,';}m+='target-densitydpi=device-dpi">';document.write(m);}());</script>
<meta charset="UTF-8">
<title>俄罗斯方块2222</title>
<link href="./loader.css" rel="stylesheet" />
<!-- 1.制作4中不同尺寸的图片:-->
<!--适用于 Retina 屏的 iPad-->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-precomposed-144x144.png"/>
<!--适用于 Retina 屏的 iPhone-->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-precomposed-120x120.png"/>
<!--适用于非 Retina 屏的 iPad-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-precomposed-72x72.png"/>
<!--适用于非 Retina 屏的 iPhone-->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed-57x57.png"/>
<!--2.vue项目中，需将4张图片放到static文件中-->
<!--3.在index.html的<head></head>之间添加以上代码-->
<!--4.部署上线-->
<!--5.完成上述步骤后，在safari中打开网址-->
<link href="css-1.0.1.css" rel="stylesheet"></head>
<body>
<div id="root">
<div class="load">
<div class="loader">加载中...</div>
</div>
</div>
<script type="text/javascript" src="app-1.0.1.js"></script></body>
</html>
上面的代码需要注意：
1，href 路径不要错
2， 这几句，要加上
3， 如果如上操作修改后没效果，除了检查代码正确外，还需要部署这些前端代码的人，重新部署下就行了。
<meta content="yes" name="apple-touch-fullscreen">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="white" name="apple-mobile-web-app-status-bar-style">
<link id="J_desktopIcon" sizes="114x114" rel="apple-touch-icon-precomposed" href="image.jpeg">
网友评论