功能很简单，看截图就可以了。

侦测iPhone/iPod

开发特定设备的移动网站，首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA，然后转向到专属的URL。

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
}
}

虽然Javascript是可以在水果设备上运行的，但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输，所以下面是服务器端侦测和转向：

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
header('Location: http://yoursite.com/iphone');
exit();
}

设置viewpoint和屏幕等宽

如果不设置viewpoint，网站在viewpoint就会显示成缩略形式。如果你专门为iPhone/iPod开发网站，这一条很有用，而且很简单，只需要插入到head里就可以：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

使用iPhone规格图标

如果你的用户将你的网站添加到home screen，iPhone会使用网站的缩略图作为图标。然而你可以提供一个自己设计的图标，这样当然更好。图片是57×57大小，png格式。不需要自己做圆角和反光，系统会自动完成这些工作。然后将下面这条加入head中：

<rel="apple-touch-icon" href="images/youricon.png"/>

阻止旋转屏幕时自动调整字体大小

-webkit-text-size-adjust是webkit的私有css：

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

侦测设备旋转方向

iPhone可以在横屏状态下浏览网页，有时候你会想知道用户设备的手持状态来增强可用性和功能。下面一段Javascript可以判断出设备向哪个方向旋转，并且替换css：

window.onload = function initialLoad() {updateOrientation();}

function updateOrientation(){
var contentType = “show_”;
switch(window.orientation){
case 0:
contentType += “normal”;
break;

case -90:
contentType += “right”;
break;

case 90:
contentType += “left”;
break;

case 180:
contentType += “flipped”;
break;
}
document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);
}

iPhone才识别的CSS

如果不想设备侦测，可以用CSS媒体查询来专为iPhone/iPod定义样式。

@media screen and (max-device-width: 480px) {}

缩小图片

网站的大图通常宽度都超过480像素，如果用前面的代码限制了缩放，这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够，我们可以用CSS让iPhone自动将大图片缩小显示。

@media screen and (max-device-width: 480px){
img{max-width:100%;height:auto;}
}

注意如果原图片非常大，或一个页面非常多图，最好还是在服务器端缩放到480像素宽，iPhone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。

默认隐藏工具栏

iPhone的浏览器工具栏会在页面最顶端，卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间，特别是横向屏幕时。我们可以让它自动卷动上去。

window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);

使用特殊链接

这两条不用说了吧：

<a href="tel:12345678900">打电话给我</a>
<a href="sms:12345678900">发短信</a>

模拟:hover伪类

因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);
myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);
}

然后用CSS增加hover效果：

a:hover, a.hover { /* 你的hover效果 */ }

这样设计一个链接，感觉可以更像按钮。并且，这个模拟可以用在任何元素上。

参考资料：

iPhone CSS—tips for building iPhone websites

iPhone & iPod Detection Using Javascript

iPhone Development: 12 Tips To Get You Started

Tutorial: Building a website for the iPhone

hover pseudoclass for the iPhone

如果是为Maemo 5开发web apps、WRT Widgets或适配网站，就可以使用这资源了。

http://www.forum.nokia.com/document/Maemo_5_Icon_List/

• XmlHttpRequest 用于AJAX的数据传输，第一版已有测试
• <canvas> HTML5位图缩放渲染，第一版已有测试
• contenteditable HTML5内容编辑，第一版已有测试
• Geolocation 位置信息
• <input type=”date” /> HTML5表单属性
• Appcache HTML5应用缓存
• <video> HTML5新增的视频标签
• <audio> HTML5新增的音频标签
• Web Workers
• localStorage HTML5本地存储数据库
• sessionStorage
• @font-face CSS3字体

加粗的是新增的测试，相比第一个版本，测试的技术规格更加高了，并且这次使用了javascript显示测试结果，很显然是面对更加先进的浏览器的。并且测试都集中在HTML5的新属性和离线存储方面，只有最后一条是关于视觉设计的新测试。如果要开发支持离线的web app，可以先以此测试一下你的目标浏览器。

Widgets运行于Bolt服务器端，显示在Bolt浏览器内，而不是设备的待机屏幕上。目前有九个可用的Widgets：

• 天气—显示世界范围内的某个城市的四天的气象
• Twitter Profile – 显示用户的 tweets
• Twitter 搜索
• Bolt 论坛—显示 Bolt user forum 的最新的10个帖子，可以回复和发表新话题。
• 计算器
• 日历
• 维基百科搜索， Dictionary.com 搜索和必应搜索。

目前还不知道怎样开发和添加一个Widget。

Skyfire 浏览器目前覆盖 S60 和 WM 两个平台，像 Opera Mini 一样通过服务器渲染完整网页后发给手机。该公司刚刚收购了 kolbysoft（Android 平台 Steel 浏览器开发商），希望借由 WebKit 内核在手机上处理一些简单的网页内容，搭配自己的云端计算。

Skyfire CEO Jeff Glueck 这样解释：“我认为 WebKit 在处理简单的 HTML 浏览方面表现非常不错。但它在处理网络上那些富媒体的时候表现不佳——吃带宽的大文件以及 Flash、Quicktime、Silverlight 等专有插件”。

2008 年 Skyfire 就通过云端技术渲染网页，为手机提供 Flash 等其它富媒体内容。公司主要依靠广告收入，但也将运营商视为潜在客户。但 2008 年至今，Skyfire 进展有限，最近的 StatCounter 报告显示该浏览器带来的流量甚至比 PSP 还少。S60/WM 和 Android 的此消彼长是重要原因。

目前 Webkit 内核浏览器占据移动领域的主导地位，iPhone、Android、webOS、S60 四个平台的自带浏览器都采用该内核，RIM 公司通过收购 Torch Mobile 为黑莓开发 WebKit 浏览器。

也就是说，客户端应该可以不用怎么改变，全程的页面和富媒体渲染都是在云端进行的。

以下是这本书的目录：

• 移动丛林
• 移动浏览
• 架构和设计
• 设置环境
• 标记语言和标准
• 编码
• 移动浏览器的CSS
• 移动JavaScript
• AJAX, HTML 5 和 RIA
• 服务器端侦测和传输
• 定位和地图
• 移动Widgets和离线应用
• 测试、调试和性能
• 分布和社会化Web 2.0

闪电浏览器BOLT的开发商Bitstream近日宣布，这款浏览器的下一个版本v1.7即将可以运行Web apps，也就是Widgets。

BOLT已经支持Ajax，Javascript和其他web语言。但Widgets会直接安装在BOLT浏览器内部，因此加载和执行速度更快。BOLT的widgets使用W3C Widgets标准编写。用户可以在浏览器的菜单中访问Widgets。

根据Bitstream所说，去年已有超过340万BOLT注册账号，平均每天传输280万页面。BOLT 1.7将在二月十五日的移动世界大会上发布，而且同时会附带一些测试的Widgets。

这样，许许多多运行于诺基亚WRT、苹果Dashboard、Windows 桌面小工具、KDE、Opera和Google桌面等平台的Widgets，都可以轻松移植到BOLT上，为其增添新功能。

为了优化输出EPUB格式的显示效果，使用以下最佳实践准备图片。

转换InDesign图稿为外部图片

只有被置入InDesign的图片才能保存在EPUB文件中。InDesign矢量绘图工具创建的图稿则被丢弃。如需包含InDesign绘制的图稿，就要将它们复制粘贴到Adobe Illustrator，Photoshop或另一个InDesign文档中，生成外部图片，然后再置入到InDesign文稿中。

锚定图片

为了精确控制EPUB文件中显示的图片，必须要将图片锚定到文本中。锚定图片也确保当EPUB文件reflow时，图片能跟随所锲入的文字移动。如果不锚定图片，InDesign则会按页面顺序输出它们——从左到右，自上至下。那些图片将可能会全部出现在所有文本的开始或者结尾处，除非你仔细的排布或定位文字和图形框架控制它们之间的流顺序。对于已经排好的文档，想将其转化为EPUB格式而要锚定图片时，用选择工具选中图片，剪切它，然后用文字工具定位文本中到要锚的位置，粘贴。这样图片就定位到文本中。

锚定每一张图片到独立的段落

为了确保EPUB文件中段落之间的图片显示，图片必须通过插入一个额外的回车来锚定到自己的段落。之后你可以应用段落样式来控制图片定位。举例来说，要将图片居中，并在上下加上一些间距，可以在段落样式里选择居中对齐和段前距、段后距。
注意：因为在EPUB文件会丢弃文本绕排设定，你必须使用InDesign段距和缩进选项来控制图片和文本的间距。
如果你想保留文档现有的布局，就必须使用自定义的锚图片位置。选择想要重定位的锚图片，选择 对象>定位对象>选项。

在定位对象选项对话框中，在“位置”下拉选单中选择“自定义”，然后在下面定义定位选项，最后点击确定，图片就可以自由定位了，并且可以根据设定的关系和文本一起移动。如果图片是锚定在独立的段落中，因为这个空段落可能应用了段距，所以可能会出现额外的空白。可以应用0磅来移除空距。
注意：当你使用自定义定位选项时，图片的精确位置并不保存在EPUB文件中，但你可以在InDesign文档里控制它。

使用彩色图片

尽管许多现在的电子书阅读器使用灰度显示，但使用彩色图片是为一个好主意有两个原因。第一，未来的电子书阅读器很可能有彩色显示，所以到时候你不用被迫更新你的电子书。第二某些阅读设备，例如iPhone，iPod Touch和若干种移动设备支持彩色图片。

为封面创建单张图片

电子书封面应该是一张图片。如果你的封面设计是InDesign图文框架混排的组合，设计元素在电子书中会被线性化。想要快速生成封面图片，你可以用InDesign将封面导出成JPEG文件。选择 文件>导出，命名图片，选择JPEG文件格式，然后选择保存。在导出JPEG对话框，定义想要导出的页码。为了优化不同屏幕尺寸和分辨率的显示，定义分辨率在72ppi并选择最大质量，点击“导出”按钮生成图片。最终的封面图片尺寸可以大约在600X800像素就可以在很多阅读器上获得很好的效果。如果图片像素尺寸不够大，就导出更高的分辨率。封面图片生成之后，再导入到InDesign中。
或者你也可以复制封面图稿到另一个InDesign文档中保存，并置入到你的电子书文档中。当你输出EPUB文件时，导入的InDesign文档会转换成JPEG图片。

用书籍文件管理封面

EPUB文件格式不会定义页面结构，所有的内容一起排列到一个连续的线性流中。这对一个电子书封面是个问题，因为之后的文本可能会跑到封面中。为了避免这个问题，创建一个单独的InDesign文档单独放置封面图片。然后用书籍文件将封面文档和其他内容的文档组合到一起（文件>新建>书籍）。

了解InDesign图片导出选项

导出优化过的图片

带有格式

图像转换

GIF选项

JPEG选项

导出原始图像

颜色空间

分辨率

图片尺寸

文件格式

本文翻译自http://www.adobe.com/products/indesign/epub/howto/pdfs/eBooks_optimizing_images.pdf