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" οnclick="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" οnclick="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 oldοnlοad=window.onload;
if(typeof window.onload!="function"){
window.οnlοad=func;
}else{
window.οnlοad=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;}