webapp添加网站图标到ios桌面

1.设置图标logo

    <link rel="apple-touch-icon" sizes="57x57" href="images/applogo57.png">    <link rel="apple-touch-icon" sizes="72x72" href="images/applogo72.png">    <link rel="apple-touch-icon" sizes="114x114" href="images/applogo114.png">    <link rel="apple-touch-icon" sizes="144x144" href="images/applogo144.png">

2.页面添加提醒：如何添加到主屏幕

<div class="dmcontainer">       <div name="m_pos" id="m_95614">            <div class="addDesktop_ipad" id="addDesktop_ipad">                <div class="tipPanel">                    <div class="webApp"></div>                    <div class="tipCon">先点击<span class="ico_adddesktop_ios" style="" id="ico_adddesktop_ios7_pad"></span><br>再选择"添加到主屏幕"</div>                    <div class="btnClose" onclick="closeclick_pad()"><span class="popCls"></span></div>                </div>            </div>            <div class="addDesktop_iphone" id="addDesktop_iphone" style="display: block;">                <div class="tipPanel">                    <div class="webApp"></div>                    <div class="tipCon">先点击<span class="ico_adddesktop_ios" style="" id="ico_adddesktop_ios7_phone"></span><br>再选择"添加到主屏幕"</div>                    <div class="btnClose" onclick="closeclick_phone()"><span class="popCls"></span></div>                </div>            </div>       </div>   </div>

3.js控制提醒内容，首次提醒，之后不再提醒及判断ios版本

//提示添加到主屏幕(function(){    OST = {};    var osType = {        isWin:'Win',        isMac:'Mac',        isSafari:'Safari',        isChrome:'Chrome',        isIPAD: 'iPad',         isIPHONE: 'iPhone',         isIPOD: 'iPod',        isLEPAD: 'lepad_hls',        isMIUI: 'MI-ONE',        isAndroid:'Android',        isAndroid4: 'Android 4.',        isAndroid41: 'Android 4.1',        isSonyDTV: "SonyDTV",        isBlackBerry:"BlackBerry",        isMQQBrowser:'MQQBrowser',        isMobile:'Mobile'    };    for(var os in osType){        if(navigator.userAgent.indexOf(osType[os]) !== -1){            OST[os] = true;        }else{            OST[os] = false;        }    }    OST.isIos = ((OST.isIPAD || OST.isIPHONE || OST.isIPOD) || OST.isMac );    OST.isPhone = (OST.isIPHONE || OST.isIPOD || (OST.isAndroid&&OST.isMobile));    OST.isPad = (OST.isIPAD || (OST.isAndroid && !OST.isMobile));})();function closeclick_phone(){document.getElementById('addDesktop_iphone').style.display='none';cookiesave('closeclick_iphone','closeclick_iphone','','','');var h=document.getElementsByTagName('head')[0],        s=document.createElement('script');        s.type='text/javascript';        s.charset='utf-8';        s.src='http://hz.youku.com/red/click.php?tp=1&cp=4009134&cpp=1000607&url= '+window.location.href;        h.firstChild?h.insertBefore(s,h.firstChild):h.appendChild(s);}function cookiesave(n, v, mins, dn, path){if(n){if(!mins) mins = 7 * 24 * 60;if(!path) path = "/";var date = new Date();date.setTime(date.getTime() + (mins * 60 * 1000));var expires = "; expires=" + date.toGMTString();if(dn) dn = "domain=" + dn + "; ";document.cookie = n + "=" + v + expires + "; " + dn + "path=" + path;}}function cookieget(n){var name = n + "=";var ca = document.cookie.split(';');for(var i=0;i<ca.length;i++) {var c = ca[i];while (c.charAt(0)==' ') c = c.substring(1,c.length);if (c.indexOf(name) == 0) return c.substring(name.length,c.length);}return "";}function clickclose(){ var is_IOS7=Boolean(navigator.userAgent.match(/OS [7-9]_\d[_\d]* like Mac OS X/i));    if(!OST.isIPHONE){document.getElementById('addDesktop_iphone').style.display='none';}else{if(cookieget('closeclick_iphone')=='closeclick_iphone'){document.getElementById('addDesktop_iphone').style.display='none';}else{                         if(is_IOS7){           document.getElementById( "ico_adddesktop_ios7_phone" ).className = "ico_adddesktop_ios7";                           }document.getElementById('addDesktop_iphone').style.display='block'; var h=document.getElementsByTagName('head')[0],        s=document.createElement('script');        s.type='text/javascript';        s.charset='utf-8';        s.src='http://hz.youku.com/red/click.php?tp=1&cp=4009133&cpp=1000607&url= '+window.location.href;        h.firstChild?h.insertBefore(s,h.firstChild):h.appendChild(s);}}}function addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload!="function"){window.onload=func;}else{window.onload=function(){oldonload();func();}}}addLoadEvent(clickclose);

4.css控制提醒内容样式

/*添加主屏幕提示*/.dmcontainer{min-width: 300px;max-width: 984px;margin: 0 auto;padding-top: 20px;padding-bottom: 20px;}@media screen and (min-width: 768px).dmcontainer {padding-left: 20px;padding-right: 20px;}.addDesktop_ipad {display: none;}.addDesktop_iphone{z-index:1390; -webkit-transition-property:all; -webkit-transition-duration:0.2s; -webkit-transition-timing-function:linear; -webkit-transition-delay:initial;position:fixed; bottom:0px;left:10px;display:none;}.addDesktop_ipad{display:none; }.addDesktop_iphone .tipPanel{position:relative; z-index:1390; margin-top:0px; margin:0 auto 13px; width:220px; height:65px; background:#fff; padding:9px; color:#555; border:1px solid #bbb; font-size:14px; -webkit-box-shadow:0 3px 5px rgba(0,0,0,.5); box-shadow:0 3px 5px rgba(0,0,0,.5);}.addDesktop_iphone .tipPanel::before{content:""; position:absolute; bottom:-8px; left:150px; margin-left:-8px; height:14px; width:14px; overflow:hidden; background:#fff; -webkit-transform:rotate(45deg); border:1px solid #afafaf; border-top:none; border-left:none; -webkit-box-shadow:0 3px 5px rgba(0,0,0,.5); box-shadow:0 3px 5px rgba(0,0,0,.5);}.addDesktop_iphone .tipPanel::after{content:""; position:absolute; bottom:0; left:150px; margin-left:-15px; height:15px; width:30px; overflow:hidden; background:#fff;}.addDesktop_iphone .webApp{float:left; margin-right:10px; width:64px; height:64px; background-image:url(applogo72.png); -webkit-background-size:64px; background-size:64px;}.addDesktop_iphone .btnClose{width:18px; height:18px; position:absolute; top:5px; right:5px; padding:5px;}.addDesktop_iphone .tipCon{float:left; padding-top:5px; line-height:24px;}.addDesktop_iphone .popCls{position:absolute; right:5px; top:12px; height:4px; width:18px; background:#c2c2c2; font:bold 3.25em/0 arial; -webkit-transform:rotate(45deg); border-radius:1px;}.addDesktop_iphone .popCls::after{content:""; position:absolute; top:0; right:0; height:4px; width:18px; overflow:hidden; background:#c2c2c2; -webkit-transform:rotate(90deg); border-radius:1px; }.addDesktop_iphone .ico_adddesktop_ios{background: url("05100000528C6E346714C031CE066FC0.png");display: inline-block; height: 16px; width: 19px; margin-top: 2px; margin-right: 3px; margin-bottom: 0px; margin-left: 3px; -webkit-background-size: 19px 16px; vertical-align: top;}.addDesktop_iphone .ico_adddesktop_ios7{background: url("05100000528074156714C0316A06AC70.png");display: inline-block; height: 22px; width: 15px; margin-top: -2px; margin-right: 3px; margin-bottom: 0px; margin-left: 3px; -webkit-background-size: 15px 22px; vertical-align: top;}