将网站添加到 iPhone 的主屏幕上,并修改徽标以隐藏浏览器底部并生成桌面应用程序。
思路分享:
在iphone
手机上,网站可以添加到主屏幕。
默认情况下,一个网站被添加到主屏幕时,默认显示的是网站截图,如何才能显示成我们自己想要设置的图标Logo
和隐藏底部栏
,让这个桌面网站看起来像个app
呢?我在实际工作中遇到了这个需求,将实现步骤总结如下:
其实Apple
通过在网页的head部分
添加link
标记,在Safari浏览器
中我们可以轻易地将网站
添加到iPhone的主屏幕
,使它看起来就像一个普通的app
一样。
那么,我们如何修改这个生成的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
位置
二:在对应的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">
上一篇: iPhone 屏幕尺寸开发记录
下一篇: 如何在 iPhone 上编辑主屏幕页面