Cacher is the code snippet organizer for pro developers

/*----------------------------------------------*/
/*---------------- ADD TO HOMESCREEN -----------------*/
/*----------------------------------------------*/

.addtohome {
    position: fixed;
	bottom: 20px;
	display: none;s
	width: 100%;
	z-index: 1000000;
}

.addtohome p{
text-align:center;
color:#fff;
padding:10px;
width:90%;
margin:auto;
display:block;
position:relative;
background:rgba(0,0,0,.8);
border-radius:5px;

-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}

.addtohome p:after {
  position: absolute;
  bottom: -10px;
  left: 46%;
  width: 0px;
  height: 0px;
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(0,0,0,.8);
}

<!-- THIS IS INCLUDED IN u-HEADER -->
<!-- THIS IS INCLUDED IN u-HEADER -->
<!-- THIS IS INCLUDED IN u-HEADER -->


<script>
	$(document).ready(function(){
		var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone") != -1 ? true : false;
		var isiPod   = navigator.userAgent.toLowerCase().indexOf("ipod")   != -1 ? true : false;
		var isChrome = navigator.userAgent.toLowerCase().indexOf("crios")  != -1 ? true : false;


		if( (isiPhone || isiPod) && !isChrome){
		  	addtohome();
		}

	});
  
	function addtohome(){
		$('.addtohome').show();
		$('.addtohome').delay(2000).animate({'bottom':'5px', 'opacity': 1}, 1000);
		$('.addtohome').click(function(){
		$(this).fadeOut();
	});
}
</script>



<div class="addtohome">
<p>Bookmark Our Page By Adding Our Website To Your Home Screen</p>
</div>