webapp之路--apple私有属性apple-touch-icon

以前我们用过favicon在浏览器给网站进行身份标识，用法如下：

[html] view plaincopy

  1. <link href="http://image.feeliu.com/web/favicon.ico" rel="shortcut icon" />
  2. <link href="http://image.feeliu.com/web/favicon.ico" rel="Bookmark" />

现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。实现方法是在HTML文档的<head>标签加入下面代码即可。

[html] view plaincopy

  1. <link rel="apple-touch-icon" href="/custom_icon.png"/>

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

57×57（默认值）的图标对应320×640的iphone老设备，72×72对应ipad，114×114对应retina屏的iPhone及iTouch。ipad3对应144×144的高分辨率。

这是官方开发社区的详细介绍：

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.

For iPhone and iPod touch both of these sizes are required:

  • 57 x 57 pixels
  • 114 x 114 pixels (high resolution)

For iPad, both of these sizes are required:

  • 72 x 72 pixels
  • 144 x 144 (high resolution)

When iOS displays your app icon on the Home screen of a device, it automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen. Specifically, iOS adds:

  • Rounded corners
  • Drop shadow
  • Reflective shine (unless you prevent the shine effect)

Note: You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (this is available in iOS 2 and later).

Ensure your icon is eligible for the visual enhancements iOS adds (if you want them). You should produce an image in PNG format that:

Has 90° corners

Does not have any shine or gloss

所以最完善的写法应该是：

[html] view plaincopy

  1. <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
  2. <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
  3. <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
  4. <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png" />

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

图标搜索的优先级如下：

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

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

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

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

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

apple-touch-icon-57×57.png

apple-touch-icon-precomposed.png

apple-touch-icon.png

在第三代 iPad 上有四种图标规格： 57x57, 72x72, 114x114, 144x144.

由于 retina 图标的尺寸是标准图标大小的2倍，因此实际上我们只需要只做2款图标即可：114 x 114 和 144 x 144 。 将retina 图标的大小设置成标准图标的尺寸，那么IOS就会根据情况自动进行缩放了。

[html] view plaincopy

    1. <!-- Standard iPhone -->
    2. <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
    3. <!-- Retina iPhone -->
    4. <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
    5. <!-- Standard iPad -->
    6. <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
    7. <!-- Retina iPad -->
    8. <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-
时间： 2024-10-24 23:51:49

webapp之路--apple私有属性apple-touch-icon的相关文章

Python私有属性set和get方法2

class Person(object): count = 0 #类属性 def __init__(self,name,age):#实例属性 # self.__name = name#name是私有属性:私有属性接收是set/get方法; # self.__name 也可以用 self.setName(name) 这样的好处是在创建实例的时候,不用再重新去给赋值(调用set方法),初始化就可以赋值 self.setName(name) self.age = age def run(self):

浏览器私有属性

一.css中抬头 ::-moz代表firefox浏览器私有属性 ::-ms代表ie浏览器私有属性 ::-webkit代表safari.chrome私有属性 ::-o代表opera 二.常见的中私有属性拿chrome浏览器举例 ::如果前面为空代码全局,如果前面有某个元素的css选择器代表改元素的对于内容 1.输入框 ::-webkit-input-placeholder {} //阻止input出现黄色背景 input:-webkit-autofill { background-color: #

Python3基础 类的伪私有属性 __加变量名 的示例

镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.------------------------------------------ex1: code: class MyClass : #属性,公有的 height=10 weight=20 #伪私有属性 __haha=30; test=MyClass() print(test.__haha) result: ============= RESTART: C:\Users

java反射调用私有方法和修改私有属性

//调用私有方法package com.java.test; public class PrivateMethod { private String sayHello(String name) { return "hello "+name; } } 测试: package com.java.test; import java.lang.reflect.Method; public class PrivateMethodTest { public static void main(Str

JavaScript基础对象创建模式之私有属性和方法(024)

JavaScript没有特殊的语法来表示对象的私有属性和方法,默认的情况下,所有的属性和方法都是公有的.如下面用字面声明的对象: var myobj = { myprop: 1, getProp: function () { return this.myprop; } }; console.log(myobj.myprop); // `myprop` is publicly accessible console.log(myobj.getProp()); // getProp() is publ

访问类的私有属性（RTTI和模仿类2种方法）

如何访问类的私有属性? 下面以 TPathData 为例,它有一个私有属性 PathData,储存了每一个曲线点,但一般无法修改它,需要利用下面方法,才能访问修改(若有更好的方法,歡迎分享): 一.利用 RTTI 取得类私有属性(建议使用此方法): type TPathDataHelper = class helper for TPathData public function PathData: TList<TPathPoint>; end; function TPathDataHelper

JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链 JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法 1.Object类 在JS中,Object是所有类的基

java中的反射，知道类名创建类，还可以设置私有属性的值

刚刚学到了反射,感觉反射的功能好强大,所以想写篇博客记录下自己的学习成果. 利用反射来创建对象. Class c1=Class.forName("test.Person");//通过类名来创建类,这里test.person只是一个类名,.这个person类代码在//本文最下方 /** *情况1:调用无参的构造方法来创建对象 */ Person p=c1.newInstance();//这样就创建好了 /** *情况2:调用有参构造方法 */ Constructor cs=c1.getC

[示例]访问类的私有属性

如何访问类的私有属性? 下面以 TPathData 为例,它有一个私有属性 PathData,储存了每一个曲线点,但一般无法修改它,需要利用下面方法,才能访问修改(若有更好的方法,歡迎分享): 一.利用 RTTI 取得类私有属性(建议使用此方法): type TPathDataHelper = class helper for TPathData public function PathData: TList<TPathPoint>; end; function TPathDataHelper