51kuku

一个网页在Safari里”添加到主屏幕“后，打开了有没有APP的感觉？但是打开链接（有同学说target="_self"嘛，当然你时间充裕可以试试）又会跳回Safari，这效果打了折扣。。。
1.首先你需要在head中加点属性，这样打开页面后不会有地址栏什么的，通通干掉~这样更像APP嘛（这里是指添加到主屏幕后打开时，在Safari可是不行的哦~）

1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
   
2. <meta name="apple-mobile-web-app-capable" content="yes" />
   
3. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   
4. <meta name="apple-mobile-web-app-title" content="<?=$title;?>">
   
5. <meta name="format-detection" content="telphone=no, email=no" />

复制代码

最后一个可以不加
2.这样是不是像APP了有没有，but，点开链接又露馅了，那么接着来。

1. if(('standalone' in window.navigator)&&window.navigator.standalone){
   
2.         var noddy,remotes=false;
   
3.         document.addEventListener('click',function(event){
   
4.                 noddy=event.target;
   
5.                 while(noddy.nodeName!=='A'&&noddy.nodeName!=='HTML') noddy=noddy.parentNode;
   
6.                 if('href' in noddy&&noddy.href.indexOf('http')!==-1&&(noddy.href.indexOf(document.location.host)!==-1||remotes)){
   
7.                         event.preventDefault();
   
8.                         document.location.href=noddy.href;
   
9.                 }
   
10.         },false);
    
11. }

复制代码

你可以加到head里，当然随便扔一个js里也行。
3.添加到桌面是不是要有个图标呢？依然head里

1. <link href="http://img1.cache.netease.com/3g/img11/3gtouch/apple-touch-icon-57x57-precomposed.png" rel="apple-touch-icon-precomposed">
   
2. <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后还可以做扩展，比如引导用户添加什么的，自己太懒了 你们扩展扩展吧