自定义网站的 iPad 主屏幕图标

标签： Apple iPad | 发表时间：2012-09-15 18:54 | 作者：Denis
出处：http://fairyfish.net

最近在制作 iPad 导航（ http://ipaddh.com/），慢慢接触到一些 iPad 网页制作碰到的的特殊问题，接下来几篇文章，我们会一一介绍。希望你能喜欢 :-) 。第一个问题就是关于添加网站到 iPad 主屏幕和自定义网站的主屏幕图标。

添加网站到 iPad 主屏幕

我们知道在 iPad 使用 Safari 浏览网站的时候，如果喜欢某个网站（比如我们刚做的 iPad 导航 http://ipaddh.com/），除了可以把该网站添加到书签以及 Email 给好友之外，还可以把这个网站添加到主屏幕，使得该网站类似于一个 iPad 的 App 应用程序，下次打开就直接点击该图标而不需要重新输入网址。

添加网站到 iPad 主屏幕
添加网站到 iPad 主屏幕

iPad 的主屏幕 Webclip 图标功能

但是如果该网站没有做任何设置，添加到 iPad 主屏幕显示的是 iPad 自动将页面截屏并缩放到相应尺寸生成的图标，这样对于用户来说不是那么显著，其实 iPad 有个叫做 Homescreen Webclip 功能，它可以让你定义显示添加到 iPad 主屏幕的图标。

如何给网站创建 iPad Webclip 图标

因为 iPad 会自动给图标添加一些视觉效果，如圆角、阴影和玻璃反光效果，为了保证你的图标可以利用这些视觉效果，应该制作一个 72X72 像素，90度直接无任何发亮或光泽的的 PNG 格式的图标（如果图片不符合标准尺寸， iPad 会自动按比例调整）。

然后在你的网站的 head 通过以下代码调用这个图标。

  
<link rel="apple-touch-icon-precomposed" href="http://ipaddh.com/wp-content/themes/ipaddh/logo.png" >

当然如果你将该 PNG 图片命名为 apple-touch-icon.png 放在根目录下，不需要任何语句，iPad 也会直接调用该图标。

最后的效果如下图，当然欢迎你使用 iPad 访问 iPad 导航（ http://ipaddh.com/），你可以通过添加 iPad 导航到主屏幕来测试该功能 ：-）

iPad 导航的 Webclip 最终效果
iPad 导航的 Webclip 最终效果

>>> 继续阅读全文 ...

欢迎关注我们关于 WordPress 技巧的微博：
新浪微博： http://weibo.com/wpjam
腾讯微博： http://t.qq.com/WordPressJam

© 我爱水煮鱼 / 收藏本文 / 6条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

相关 [定义 网站 ipad] 推荐：

为 iPhone 和 iPad 自定义网站的主屏幕图标

- 丸子 - NeoEase
iPhone 和 iPad 等苹果设备使用主屏幕 (Home Screen, 也称桌面) 管理应用程序, 还可以通过浏览器的添加到主屏幕功能将网站链接作为快捷方式添加为主屏幕图标. 是否你也想过为网站定义一个图标, 如果用户将网站添加至主屏幕, 网站链接看起来更像原生程序, 也能获得更多的关注. 除了兼容手机端的浏览体验, 我们还能做得更多, 为 iPhone 和 iPad 自定义网站的主屏幕图标也算其中之一, 本文将对网站的主屏幕图标及其设定方法为进行详细介绍.

自定义网站的 iPad 主屏幕图标

- - 我爱水煮鱼
最近在制作 iPad 导航（ http://ipaddh.com/），慢慢接触到一些 iPad 网页制作碰到的的特殊问题，接下来几篇文章，我们会一一介绍. 第一个问题就是关于添加网站到 iPad 主屏幕和自定义网站的主屏幕图标. 添加网站到 iPad 主屏幕. 我们知道在 iPad 使用 Safari 浏览网站的时候，如果喜欢某个网站（比如我们刚做的 iPad 导航 http://ipaddh.com/），除了可以把该网站添加到书签以及 Email 给好友之外，还可以把这个网站添加到主屏幕，使得该网站类似于一个 iPad 的 App 应用程序，下次打开就直接点击该图标而不需要重新输入网址.

QQ表情 for iPad

- 小趴 八足趴 八足 ramener - 腾讯CDC
　　QQ HD for iPad 2.2已经发布了~其中全新的高清QQ表情也跟大家见面了. 　　在这里奉上新表情的安装包同时还有赠品哟亲~. 　　QQ HD for iPad 2.2 表情菜单效果图. 　　QQ表情for iPad. 　　表情安装包在附件中~希望大家喜欢~. 　　QQ HD for iPad 2.2 表情安装包 下载.

自定义网站在 iPhone 上的“添加至主屏幕”的图标

- - 我爱水煮鱼
iPhone 5发布了，虽然有些让人失望，但是 iPhone 的地位还是无可厚非的. 随着移动设备的大军进入，各位站长是否有考虑过开发自己网站的 APP 呢. 当然不是谁都有这技术的…这样，Safari 的一个叫“添加至主屏幕”的功能就引起了我的注意，我们可以通过它伪装出一个 APP 来. 但是大家是否有发现，“添加至主屏幕”后，那个图标是你网站的缩略图，不怎么好看.

iPad 魔术，用iPad 变魔术

- 推子 - 煎蛋
这不再是Geek 们的小花招，而来自一个真正的魔术师. Simon Pierro 使用时下流行的iPad 作为道具，玩起了真资格的魔术，一会儿科技耀眼，一会手法迷人，看得人眼花缭乱 cOOL. WWDC 大会应该请这家伙在表演 :D. 苹果要起诉卖白色iPhone4外壳的小鬼. iPhone 上Facetime视频色情服务.

IPAD使用感受

- flypen - 牛博国际
IPAD是我迄今为止使用过的最好的电子产品，虽然看上去它只像一个放大的IPHONE或者ITOUCH，但那块高分辨率的大屏幕改变了一切体验. 无论浏览网页，读书，看视频，打游戏，效果和感觉都不是itouch和Iphone可以比的, 完全不是一个东西. 各种新一代专门为IPAD订制的APP，和Iphone版的比起来，都是飞跃的质变.

Steve 跟他的 iPad

- 宋大妈 - 爱范儿 · Beats of Bits
前天跟友人吃晚飯，離開時友人突然問筆者，這一陣子科技界有什麼大新聞嗎. 這一陣子科技界的記者已經忙過不停了，由 Google 收購 Motorola 起，到 HP 放棄 PC 及 WebOS，以至 Facebook Place 敗走 Foursquare……到今天早上的 Steve Job 離開蘋果的 CEO 職位.

我的iPad游戏

- Aim - Aether
说是以办公和看书为主，实际上从使用时间来看也是这样，但是不知不觉还是买了一屏的游戏（整个桌面也才三屏而已），这还不包括随时删掉的无数没啥意思的游戏. 晒一下清单，有兴趣的同学可以拿去. 支持多人对战基本都属于必买的游戏. 和iPhone、Touch，以及电脑上的多人联机游戏不一样的是，iPad的大屏幕和多点触摸允许多达四个人在一个iPad上面对面的游戏，这种体验和任何网络游戏只能面对冰冷屏幕的感觉是完全不一样的.

Facebook iPad应用曝光（图）

- Brant - 36氪
Facebook实际上已经有iPad应用了，就隐藏在iPhone应用的代码中. MG Siegler已经用了一个晚上了. 他说感觉还不错，虽然Facebook最终发布该应用时不一定跟他现在用的一样，但至少他觉得这个应用的感觉是对的. 据MG的几个消息来源称，他们已经看过这个应用，并且这就是Facebook近期打算发布的.

iPad 之裁个乔帮主

- Greyby - apple4us
下午无聊闲逛到 TUAW，发现了猛贴 — 裁纸专家 Jay Hauf 的作品. 正当无聊乏味的 iPad 消息大量充斥互联网的时候，看到这个帖子犹如见到了光明. 虽然我的手工技巧极差，但看起来用来消磨时间倒是不错. 这是 Hauf 自己剪裁的成品，平面图见此. 在裁的过程中，我发觉，在平面图上设计出立体作品，很不容易.