在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。
apple-touch-icon是IOS设备的私有标签，如果设置了相应apple-touch-icon标签，则添加到主屏上的图标会使用指定的图片。在

区域加入下面代码即可。

apple-touch-icon 标签支持sizes属性，可以用来放置对应不同的设备。

分别放置57×57（默认值）的图标对应320×640的老设备，72×72对应ipad，114×114对应retina屏的iPhone及iTouch。由于手头没有iPad3，所以没测试是否支持144×144的图标在iPad3上的显示。

虽然官方都用的png图片做说明，但实际测试jpg格式也可用（不推荐），图片无需做圆角处理，同Native App一样，系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果，可以用apple-touch-icon-precomposed代替apple-touch-icon。

图标搜索的优先级如下：

  • 如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。

  • 如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。

  • 如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。

如果未在区域指定用link标签指定图标，会自动搜索网站根目录下有apple-touch-icon...或者 apple-touch-icon-precomposed…前缀的图标。 如设备推荐尺寸为57x57,优先级如下：

  1. apple-touch-icon-57×57-precomposed.png

  2. apple-touch-icon-57×57.png

  3. apple-touch-icon-precomposed.png

  4. apple-touch-icon.png

各尺寸自适应代码：

默认：57x57，iPad：72x72，iPhone 4,Retina屏：114x114（原尺寸的2倍）

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />
 
只要做好相应尺寸的代码，加到页面里面就可以每个主屏幕上都会完美显示啦！

转自：http://blog.sina.com.cn/s/blog_5a073f0f01014jfc.html

WebApp之 apple-touch-icon的更多相关文章

  1. apple touch icon 大小总结

    <!-- For Chrome for Android: --> <link rel="icon" sizes="192x192" href= ...

  2. Android中处理Touch Icon的方案

    苹果的Touch Icon相对我们都比较熟悉,是苹果为了支持网络应用(或者说网页)添加到桌面需要的图标,有了这些Touch Icon的网页链接更加和Native应用更相像了.由于苹果设备IPod,IP ...

  3. HTML教程:link标记

    开发php语言的网站,<head>里link标签这样:<link href="xmlrpc.php?rsd=1" title="rsd" ty ...

  4. 如何一步步把网站Retina优化

    随着高清屏幕.高分辨率屏幕越来越流行,例如MacBook Retina机型.iPad Air系列,这些新生机器有着很高的PPI,对网页的清晰度要求很高,所以越来越多的站长都不得不面临一个问题,那就是把 ...

  5. <link>标签的rel属性全解析

      <link>标签定义了当前文档与 Web 集合中其他文档的关系.link 元素是一个空元素,它仅包含属性.此元素只能存在于 head 部分,不过它可出现任何次数.在 HTML 中,&l ...

  6. cordova打包webapp

    cordova打包webapp 在项目开发中,需要将h5页面打包成app,这个时候我们可以使用cordova来打包.在官方文档中,我们可以了解到创建一个app十分简单,你的电脑上有nodejs就行,我 ...

  7. sencha touch 入门系列 （一）sencha touch 简介

    参考链接:http://mobile.51cto.com/others-278381.htm Sencha touch 是基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合J ...

  8. sencha touch 入门系列 （二）sencha touch 开发准备

    这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题.接下来我们就开始我们的sencha touch开 ...

  9. sencha touch 开发准备

    这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题.接下来我们就开始我们的sencha touch开 ...

  10. 支持Touch ID！EOS 项目进展速报

    Daniel Larimer 周六在 Steemit 上向大家介绍了 EOS 项目的最新进展,惊喜不少. 原文链接 : https://steemit.com/eosio/@dan/eos-io-de ...

随机推荐

  1. 【原创】 windows下开发软件推荐

    1. 数据库查看器工具 navicat.exe

  2. [Wordpress]Wordpress使用SMTP发送电邮

    参考:phpmailer_init中的代码,可以配置使用SMTP发送电邮 官方的案例代码是: add_action( 'phpmailer_init', 'my_phpmailer_example' ...

  3. CSS3—六边形

    整理了2种方法,看完肯定觉得超简单~ 一.旋转型 话不多说先看下需要的样式: 1.transform:rotate(angle) 2.overflow 3.visibility 效果:演示效果,run ...

  4. live(),bind(),delegate()等事件绑定方法的区别及应用解析

    1 首先bind()方法是最直观的,但是也是弊端最大的. $('a').bind('click',function(){alert('that tickles!')}) 这和事件冒泡有直接关系,当我们 ...

  5. Linux 命令 - cp: 拷贝文件和目录

    命令格式 cp [OPTION]... [-T] SOURCE DEST cp [OPTION]... SOURCE... DIRECTORY cp [OPTION]... -t DIRECTORY ...

  6. CF下Split的使用

    在Compact Framework 下 String的Split不能正确的处理 字符串 分割字符串 如对字符串 "abcfdef12abcedef23" 以"ef&qu ...

  7. javascript对象初读

    <script type="text/javascript"> function baseClass() { this.showMsg = function() { a ...

  8. 第四十六篇、UICollectionView广告轮播控件

    这是利用人的视觉错觉来实现无限轮播,UICollectionView 有很好的重用机制,这只是部分核心代码,后期还要继续完善和代码重构. #import <UIKit/UIKit.h> # ...

  9. 第二十八篇、自定义的UITableViewCell上有图片需要显示，要求网络网络状态为WiFi时，显示图片高清图；网络状态为蜂窝移动网络时，显示图片缩略图

    1)SDWebImage会自动帮助开发者缓存图片(包括内存缓存,沙盒缓存),所以我们需要设置用户在WiFi环境下下载的高清图,下次在蜂窝网络状态下打开应用也应显示高清图,而不是去下载缩略图. 2)许多 ...

  10. 实例介绍Cocos2d-x中Box2D物理引擎：HelloBox2D

    我们通过一个实例介绍一下,在Cocos2d-x 3.x中使用Box2D物理引擎的开发过程,熟悉这些API的使用.这个实例运行后的场景如图所示,当场景启动后,玩家可以触摸点击屏幕,每次触摸时候,就会在触 ...