首页 > web前端 > html教程 > 将网站添加到iPhone的主屏幕上_html/css_WEB-ITnose

将网站添加到iPhone的主屏幕上_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:32:39
原创
1390 人浏览过

  我之前有篇文章介绍过如何将网站固定到Windows的开始菜单,并可以自定义图标、颜色以及Windows推送通知,其实Apple也有类似的功能,通过在网页的head部分添加link标记,在Safari浏览器中我们可以轻易地将网站添加到iPhone的主屏幕,使它看起来就像一个普通的app一样。

  要实现该功能很简单,只需要在你网站的根目录下放一张名为"apple-touch-icon.png"的图片即可,像添加favicon一样(将名为"favicon.ico"的图标放在网站的根目录下,浏览器会自动加载并显示网站的图标)。

  如果需要精确控制,添加下面的代码:

  1. 在网页的head部分添加以下代码,其中href属性值为图片的路径。

<link rel="apple-touch-icon" href="/custom_icon.png"/>
登录后复制

  2. 为满足不同分辨率设备的显示效果,可以添加三个不同分辨率的图片:57 x 57像素用于前三代iPhone和iPod Touch,72 x 72像素用于iPad,114 x 114像素用于采用Retina display的iPhone4和iPod Touch等后续产品。通过sizes属性控制:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" /><link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /><link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
登录后复制

  3. 另外,通过将rel属性的值修改成"apple-touch-icon-precomposed"来避免iOS将图标添加高光效果。

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板