|
一个网页在Safari里”添加到主屏幕“后,打开了有没有APP的感觉?但是打开链接(有同学说target="_self"嘛,当然你时间充裕可以试试)又会跳回Safari,这效果打了折扣。。。
1.首先你需要在head中加点属性,这样打开页面后不会有地址栏什么的,通通干掉~这样更像APP嘛(这里是指添加到主屏幕后打开时,在Safari可是不行的哦~)
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
- <meta name="apple-mobile-web-app-title" content="<?=$title;?>">
- <meta name="format-detection" content="telphone=no, email=no" />
复制代码
最后一个可以不加
2.这样是不是像APP了有没有,but,点开链接又露馅了,那么接着来。
- if(('standalone' in window.navigator)&&window.navigator.standalone){
- var noddy,remotes=false;
- document.addEventListener('click',function(event){
- noddy=event.target;
- while(noddy.nodeName!=='A'&&noddy.nodeName!=='HTML') noddy=noddy.parentNode;
- if('href' in noddy&&noddy.href.indexOf('http')!==-1&&(noddy.href.indexOf(document.location.host)!==-1||remotes)){
- event.preventDefault();
- document.location.href=noddy.href;
- }
- },false);
- }
复制代码
你可以加到head里,当然随便扔一个js里也行。
3.添加到桌面是不是要有个图标呢?依然head里
- <link href="http://img1.cache.netease.com/3g/img11/3gtouch/apple-touch-icon-57x57-precomposed.png" rel="apple-touch-icon-precomposed">
- <link href="http://img1.cache.netease.com/3g/img11/3gtouch/apple-touch-icon-114x114-precomposed.png" sizes="114x114" rel="apple-touch-icon-precomposed">
复制代码
图标自己做喽!名称已经在第一点里加了哦,为了代码规范?还是处女情结?sorry!应该是处女座。。。,当然你不加会自动拉取网页的title
4.当然演示还是要有的哈哈 dm.ysjhz.com 填加到主屏幕 看效果,经测ipad也可以哦!
最后说下else后还可以做扩展,比如引导用户添加什么的,自己太懒了 你们扩展扩展吧 |
评分
-
查看全部评分
|