我之前有篇文章介绍过如何将网站固定到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将图标添加高光效果。

将网站添加到iPhone的主屏幕上的更多相关文章

  1. 关于在Safari浏览器中将网页添加到主屏幕的相关设置（自定义图标，启动动画，自定义名称）

    在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上,让我们的web页面看起来像native那样 第一步: 第二步: 第三步: 到这里还没结束:我们还要进行相关设置才能使我们的应用更像原生 ...

  2. 创建ipadWEB应用程序到主屏幕

    1.webkit内核中的一些私有的meta标签,这些 meta标签在开发webapp时起到非常重要的作用 (1)<meta content="width=device-width; i ...

  3. iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图

    iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图: <!-- Safari浏览器[添加到书签] --> <link rel="sh ...

  4. iOS中为网站添加图标到主屏幕以及增加启动画面

    虽然没有能力开发Native App,但还是可以利用iOS中Safari浏览器的特性小小的折腾一下,做一个伪Web App满足下小小的虚荣心的. 既然是在iOS中的Safari折腾的,那么代码中利用到 ...

  5. IOS 通过界面图标启动Web应用 + 全屏应用 + 添加到主屏幕

    请注意!!!使用了[全屏模式之后].页面的顶部会空出一大块.而且这并不属于margin,padding,或者定位.就是单纯的空出来非常难调试.其实坑就是这里 在 iPhone「添加到主屏幕」时显示自定 ...

  6. c# 多显示器设置主屏幕(Set primary screen for multiple monitors)

    原文 http://www.cnblogs.com/coolkiss/archive/2013/09/18/3328854.html 经过google加各种百度,终于找到了一个有效的解决方案,下面是两 ...

  7. [译]：Orchard入门——给网站添加页面

    原文链接:Adding Pages to Your Site 注:内容为官方文档翻译,本人遇到的page中间是布局,而非官网的body--但此内容可以在内容定义里自行修改(本文不做介绍) 在创建Orc ...

  8. 转载:iPhone 6 Plus 屏幕宽度问题 375 vs 414

    首先看一张比较简单明了的 iPhone 6 与 iPhone 6 Plus 对比图,来自 PaintCode 的<The Ultimate Guide To iPhone Resolutions ...

  9. iPhone手机的屏幕尺寸、分辨率及适配

    1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS ...

随机推荐

  1. Nodejs 高并发长链接TCP链接的服务器设计问题

    最近有个项目比较棘手,nodejs的tcp服务,目前的服务器支持3W左右的客户端连接,但是客户希望能够支持30W左右,原先的模型是让客户端请求一个地址分发服务器,然后再tcp链接到不同的地址上实现高并 ...

  2. Unity3d Android Http 开发中的坑（吐槽

    在一般的U3D网络开发中,直接使用WWW类便足够正常使用,但我在发现使用WWW下载大文件时,会导致整个程序卡顿的情况(不清楚是否我个人电脑问题),所以干脆使用HttpWebRequest/HttpWe ...

  3. DbExpressionBinding requires an input expression with a collection ResultType. 参数名: input

    使用linq多表连接遇到的问题: 解决方案:注释为出错代码,更改使用GroupBy解决问题 context.ERG_TipOffsInfo.GroupBy(x => x.Data,(Data,C ...

  4. js基础知识点总结

    如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避免全局变量和方法(命 ...

  5. 小JAVA大世界之程序建模跳蚤实验

    package com.chigoe;//房子类class House { private int m;// 保存行数 private int n;// 保存列数 private int[][] a; ...

  6. 论ubuntu的作死技巧

    此处记录自己弄崩系统的几大杀器,长期更新. 1. sudo apt-get autoremove

  7. 【ImageView】ImageView点击事件报错空指针

    今天在使用自定义圆形imageview的时候,想利用其点击事件来实现查看个人资料功能,但是该空间在Activity中的onCreate方法中调用点击事件总是出现空指针异常,每次程序都进不去主页面,到处 ...

  8. Spring 学习笔记 3. 尚硅谷_佟刚_Spring_配置 Bean

    1,bean 的配置 <bean id="helloWorld" class="com.yfy.HelloWorld"> <property ...

  9. JSF中使用jquery拦截ajax请求

    jsf提供一个内置的jsf.ajax.request方法给我们使用,如果在jquery中使用,则需要做一些更改.  此处因为使用jquery,所以可以不必在控件中添加onclick方法了,可以给控件配 ...

  10. 电子数字 网易游戏在线笔试 第一题 hihocoder

    题目链接 http://hihocoder.com/contest/ntest2016spring1/problem/1 这个题目有几个算法考点: (1)对于一个LED数码管(由7个发光二极管封装在一 ...