WebApp之 apple-touch-icon
来源:互联网 发布:淘宝如何开通淘金币 编辑:程序博客网 时间:2024/05/18 01:42
在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。
apple-touch-icon是IOS设备的私有标签,如果设置了相应apple-touch-icon标签,则添加到主屏上的图标会使用指定的图片。在
apple-touch-icon
分别放置57×57(默认值)的图标对应320×640的老设备,72×72对应ipad,114×114对应retina屏的iPhone及iTouch。由于手头没有iPad3,所以没测试是否支持144×144的图标在iPad3上的显示。
虽然官方都用的png图片做说明,但实际测试jpg格式也可用(不推荐),图片无需做圆角处理,同Native
图标搜索的优先级如下:
如果没有跟相应设备推荐尺寸一致的图标,那个会优先使用比推荐尺寸大,但最接近推荐尺寸的图标。
如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标。
如些有多个图标符合推荐尺寸,会优先选择包含关键字precomposed的图标。
如果未在区域指定用link标签指定图标,会自动搜索网站根目录下有apple-touch-icon...或者
apple-touch-icon-57×57-precomposed.png
apple-touch-icon-57×57.png
apple-touch-icon-precomposed.png
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"
/>
- WebApp之 apple-touch-icon
- WebApp之 apple-touch-icon
- webapp中设置apple-touch-icon
- webapp 图标apple-touch-icon-precomposed和apple-touch-icon区别
- apple touch icon
- apple-touch-icon和apple-touch-icon-precomposed区别使用
- apple-touch-icon-precomposed 和 apple-touch-icon属性区别
- apple-touch-icon-precomposed使用方法
- IOS apple-touch-icon属性
- 关于Apple设备私有的apple-touch-icon属性详解
- 关于Apple设备私有的apple-touch-icon属性详解
- 关于Apple设备私有的apple-touch-icon属性详解
- 苹果图标apple-touch-icon-precomposed和apple-touch-icon两种设置的区别探究
- 苹果图标apple-touch-icon-precomposed和apple-touch-icon两种设置的区别探究
- 苹果ios 浏览器Safari :apple-touch-icon.png apple-touch-icon-precomposed.png
- <link rel="apple-touch-icon-precomposed"/> 的说明
- html中iOS的图标问题apple-touch-icon等
- <link rel="apple-touch-icon-precomposed" href="xx.png" />
- mysql 中 character set 与 collation 的点滴理解(collation即比对方法,用于对应字符集的数据集如何排序以及字符串的比对规则)
- 记一次中文乱码解决过程
- spring boot 学习笔记(1)
- centos7 安装 elastic search 2.3.2
- Arcgis地图常用操作
- WebApp之 apple-touch-icon
- android中的weight
- map/set iterator not incrementable set/map使用erase时注意事项!
- Html5标签页面
- git 常用命令
- 猴子 堆箱子
- 教你看懂Code128条形码
- EDB数据同步与备份
- 设计模式六大原则(5):迪米特原则