三重県四日市でホームページ制作・ネットショップ制作を承っております。

Mobile SafariでiPhoneサイトにアクセスして、ブラウザの下部メニューの真ん中をタップすると出てくる、「ホーム画面に追加」への誘導ポップアップメニューを追加する方法。

Qiitaでも同じのを投稿したけど一応このブログでも保存。

<div id="homeIcon">
	<p><img src="/images/icon.png" />ホーム画面にアイコン追加！</p>
</div>

$(function(){
	var left = Math.floor(($(window).width() - $("#homeIcon").width()) / 2) - 10;
	var top  = Math.floor(($(window).height() - $("#homeIcon").height())) - 80;

	$("#homeIcon")
		.css({
			"top": window.innerHeight,
			"left": left,
		 })
		.animate({top: top-30}, 500)
		.animate({top: top}, 1000)
		.delay(7000)
		.fadeOut(1000);

	$('#homeIcon').click(function() {
		$(this).stop().fadeOut(1000);
	});
});