当把链接保存到手机桌面。设置图标 只在safari浏览器中有用
<link rel="apple-touch-icon" sizes="114x114" href="images/logo.png" />
这个属性是当用户把连接保存到手机桌面时使用的图标,如果不设置,则会用网页的截图。有了这,就可以让你的网页像APP一样存在手机里了
在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
图片无需做圆角处理,同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
各尺寸自适应代码:
默认: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" />
当把链接保存到手机桌面。设置图标 只在safari浏览器中有用的更多相关文章
- ASP.NET Core SameSite 设置引起 Cookie 在 QQ 浏览器中不起作用
最近在发布了基于 ASP.NET Core 实现的新版登录页面之后,陆陆续续地接到用户反馈登录时 Antiforgery Token 总是验证失败. 日志中记录的对应错误是 Antiforgery t ...
- mac的safari浏览器调试ios手机网页
iOS 6给Safari带来了远程的Web检查器工具. 一.参考链接 ios开发者文档 safari开发者工具 remote debugging safari 二.设置iphone 设置 -> ...
- 用mac的safari浏览器调试ios手机的网页
iOS 6给Safari带来了远程的Web检查器工具. 一.参考链接 ios开发者文档 safari开发者工具 remote debugging safari 二.设置iphone 设置 -> ...
- Android添加快捷方式(Shortcut)到手机桌面
Android添加快捷方式(Short)到手机桌面 权限 要在手机桌面上添加快捷方式,首先需要在manifest中添加权限. <!-- 添加快捷方式 --> <uses-permis ...
- iPhone手机VPN设置
如果iPhone,iPad游戏或软件服务器在国外不能用,就需要设置VPN了. 如果是为了解除公司上网策略限制,或者为了上Google,Facebook,都可以通过设置VPN实现. 要使用VPN需要到V ...
- Android手机APN设置(中国移动 联通3G 电信天翼),解决不能上网的问题
中国移动 第一步,设置CMNET上网 新建APN 1.名称:cmnet 2.APN:cmnet 3.APN类型:default 就仅仅填写上面3个选项,其它都是默认,不用填写. 第二步,设置彩信 新建 ...
- VMware vSphere 服务器虚拟化之二十二桌面虚拟化之创建View Composer链接克隆的虚拟桌面池
VMware vSphere 服务器虚拟化之二十二桌面虚拟化之创建View Composer链接克隆的虚拟桌面池 在上一节我们创建了完整克隆的自动专有桌面池,在创建过程比较缓慢,这次我们将学习创建Vi ...
- 小程序canvas生成海报保存至手机相册
小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...
- 【转载】华为荣耀V9手机如何设置WiFi热点共享
有时候我们在电脑的时候发现没有无线网络以及有线网络,如果你的手机有相应网络,并且流量足够(当前很多手机流量套餐都是不限量了),可以开启手机上的Wifi热点进行流量共享使用,开启Wifi流量热点后,电脑 ...
随机推荐
- java基础之IO流(一)字节流
java基础之IO流(一)之字节流 IO流体系太大,涉及到的各种流对象,我觉得很有必要总结一下. 那什么是IO流,IO代表Input.Output,而流就是原始数据源与目标媒介的数据传输的一种抽象.典 ...
- Tomcat7/8开启WebDAV的支持
WebDAV是一种超文本传输协议,Tomcat默认是支持WebDAV的,且默认为禁用状态. 更多详细信息,请参考: https://zh.wikipedia.org/wiki/WebDAV http: ...
- Redhat 5 无法安装elfutils-libelf-devel-0.137问题
http://whr25.blog.sohu.com/263584338.html 问题: RHEL5.5安装oracle11gR2的时候需要安装elfutils-libelf-devel-0.137 ...
- android开发教程之使用线程实现视图平滑滚动示例
最近一直想做下拉刷新的效果,琢磨了好久,才走到通过onTouch方法把整个视图往下拉的步骤,接下来就是能拉下来,松开手要能滑回去啊.网上看了好久,没有找到详细的下拉刷新的例子,只有自己慢慢琢磨了.昨天 ...
- yum gd linux
32位操作系统安装命令:[root@localhost ~]# yum install php-gd*64位操作系统安装命令:[root@localhost ~]# yum install php-g ...
- 391. Perfect Rectangle
最后更新 一刷 16-Jan-2017 这个题我甚至不知道该怎么总结. 难就难在从这个题抽象出一种解法,看了别人的答案和思路= =然而没有归类总结到某种类型,这题相当于背了个题... 简单的说,除了最 ...
- HDU 1501
Zipper Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- XStream 数组(List)输出结构
<!-- 期望的DOM树 --> <Articles> <item> <Title>微信SDK初步结构</Title> <Descri ...
- PHP内核探索:内存管理开篇
内存是计算机非常关键的部件之一,是暂时存储程序以及数据的空间,CPU只有有限的寄存器可以用于存储计算数据,而大部分的数据都是存储在内存中的,程序运行都是在内存中进行的.和CPU计算能力一样, 内存也是 ...
- HDU 1284 钱币兑换问题 (完全背包)
钱币兑换问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...