Depois de criar um site responsivo, por que não permitir que as pessoas o adicionem à tela inicial do iOS? Aqui estão todos os bits básicos de que você precisa para tornar seu site “Capaz de usar aplicativos da web”:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- Homescreen Icons -->
<link rel="apple-touch-icon-precomposed" href="/assets/touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/touch-icon-ipad-retina.png" />
<!-- iPhone/iPod Touch Portrait 320 x 460 (standard resolution) -->
<link rel="apple-touch-startup-image" href="/assets/startup.png" media="(min-device-width: 320px)" />
<!-- iPhone/iPod Touch Portrait 640 x 920 pixels (high-resolution) -->
<link rel="apple-touch-startup-image" href="/assets/startup-retina.png" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" />
<!-- For iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/assets/startup-tablet-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<!-- For iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/assets/startup-tablet-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />