WebApp之 apple-touch-icon
2016-03-23 15:41
330 查看
在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,优先级如下:apple-touch-icon-57×57-precomposed.pngapple-touch-icon-57×57.pngapple-touch-icon-precomposed.pngapple-touch-icon.png各尺寸自适应代码:默认:57x57,iPad:72x72,iPhone 4,Retina屏:114x114(原尺寸的2倍)
只要做好相应尺寸的代码,加到页面里面就可以每个主屏幕上都会完美显示啦!翻译自 http://blog.sina.com.cn/s/blog_5a073f0f01014jfc.html
<
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
相关文章推荐
- Azure Stack PaaS-网站(WebApp)背后是什么原理? 推荐
- WebAPP(H5)与原生APP的交互设计区别
- 【问题及解决】创建Maven webapp项目后JSP 报错
- webapp-viewport 相关知识整理
- weblogic.application.ModuleException: at weblogic.servlet.internal.WebAppModule.startContexts(WebApp
- Eclipse+Maven创建webapp项目
- WebApp开发环境搭建
- webView 之 webapp在ios中简单实现滑动,回弹,加速等效果
- 手机应用开发的原生app,WEBAPP,混合app的认识
- WebApp与Native App有何区别呢?
- 开发webapp与普工pc页面区别
- webapp开发技巧
- WebApp开发技巧精华总结
- webApp如何区分android或者IOS系统
- Eclipse Maven WebApp迁移至MyEcipse
- jquery mobile开发手机webapp页面(二)上传功能
- Eclipse+Maven创建webapp项目<二>
- Eclipse+Maven创建webapp项目<一>
- 项目总结 iFun 个人生活 webapp
- SpringbootUnable to start EmbeddedWebApplicationContext due to missing EmbeddedServletContainerFact