随着移动设备上网的普及，很多网站都会进行客户端浏览器类型侦测，主要是靠User Agent来进行识别，如果侦测到是手机浏览则可能重定向，让用户浏览移动设备专用版本。以往我们所指的移动设备，主要是手机等终端，现在，iPad也加 入到移动终端设备的行列中来，但它拥有9.7″大屏幕，iPad的Safari浏览器带来接近PC电脑的浏览感受。所以对应iPad的网站页面必须不同于 其他移动设备,区别iPad访问主要也要依靠其浏览器的User Agent来进行。
iPhone OS 3.2 SDK beta 3中描述的iPad Safari浏览器User Agent代码：
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
iPad Safari的User Agent代码包含单词：”Mobile”、”iPad”，不包含单词：”iPhone”。这点必须要留意，如果网站以前的版本对移动设备的访问并未区分，那么现在需要修改下，以防止对相应设备返回错误的版本。
模拟iPad浏览器访问的方式
如果你无法通过iPad或iPhone模拟器测试网页情况，你还是能够通过一下方式进行测试：
chrome.exe --user-agent="Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10"
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://ipad.www.opensoce.com";
}
}
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) {
header('Location: http://ipad.www.opensoce.com');
exit();
}
RewriteCond %{HTTP_USER_AGENT} ^iPad
RewriteRule ^index\..*$ ipad.html [L]
RewriteCond %{HTTP_USER_AGENT} ^iPhone
RewriteRule ^index\..*$ iphone.html [L]
if ($http_user_agent ~*iPad ) {
proxy_pass http://ipad.www.opensoce.com;
}
if ($http_user_agent ~*iPhone ) {
proxy_pass http://iphone.www.opensoce.com;
}
iPad和iPhone的Safari浏览器不支持插件以及Flash。
使用插件技术(控件)的菜单、导航等在iPad或iPhone的浏览器下将不会显示。
使用插件植入的音频、视频也不会播放, 可以 HTML5的＆lt;audio>和<video>标签发布音频视频内容。详细可参考Safari DOM中的HTMLMediaElement、HTMLVideoElement、HTMLAudioElement开发信息.
以往，你可能需要插件去表现动画内容，而在iPad和iPhone浏览器下可以直接采用Javascript+CSS3的特性去制作动画。CSS3 开始朝着模块化的方向发展，比如盒子模型、列表模块、背景和边框等等。利用CSS3，你可以直接做出圆角表格，之前可是只能用图片或者VML技术才能实 现。
关于HTML5和CSS3，目前在国内比较早和成功的应用是网易三大邮箱((mail.163.com; mail.126.com ;www.yeah.net)，你在iPad上输入上述地址的时候，会被转向到iPad适应版本，用户感受很好。HTML5在规范性和速度上拥有诸多优 势，据网易提供的数据显示，这个版本的使用中收信写信的速度提升50%。此外，还有一个优势在于，代码量减少大大提高邮箱服务器的处理运行效率，为日后的 功能扩展提供一个更强有力的平台。
HTML5/CSS3的未来和目标是为了改善每个人的网络体验。HTML5/CSS3的一点简介：
* 使用CSS3渐变，字体阴影，圆盒以边界–这些对菜单栏和简单的网站设计师特别实用的。
* 如果你想显示视频，使用HTML5 视频播放器代替Flash(显然它就不能工作）。
* 使用HTML5创建离线程序并且脱机存储数据。
* 各种实用的教程到处都有，当在开发我的iPad网络程序时我就已经利用了它们。Google他们，得到创意。
利用普通电脑的Safari测试无插件支持情况，在偏好设置->安全->，取消启用插件的选择框，
viewpoint，可以理解为：视窗、可视区域，相对于iPad硬件限定的窗口来定义的。iPad窗口大小不可改变,但viewpoint视窗大小可以设置调整。
如果在iPhone开发中指定了视窗标签设置, 在iPad开发中必须进行必要的校正。例如：
在iPhone中，我们会用下述代码的方式指定屏幕宽度
<meta name="viewport" content="width=320" /><!--不适应iPad-->
而在iPad中，则必须用device-width替代具体的宽度像素数。
<meta name="viewport" content="width=device-width" /><!--适应iPad-->
我们在设置宽度的同时可以设置可缩放的比例范围
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
外接硬件键盘仅是作为iPad的选件，触屏式键盘才是iPad主要的交互工具。用户点击文本框的时候，软键盘会自动弹出，例如用户点击<input type=”text”>或<textarea>等的时候。
iPhone、iPad用户主要是通过手指与网页进行交互。这种交互方式的缺陷是无法处理类似鼠标停留的事件，所以，在网页中的鼠标事件：mousemove、mouseover、mouseout或CSS代码的:hover达不到PC机浏览器中的表现效果.
单手指触摸事件(Touch Events)：在iPhone、iPad浏览器中可处理的单手指DOM触摸事件：touchstart、touchmove、touchend、 touchcancel(when the system cancels the touch) 。在输入框按住一会会弹出剪切/复制/粘贴窗口, 可在网页通过 -webkit-user-select: none代码禁用该功能.
双手指协同事件(Gestures), 即是指两只手指接触屏幕的时候缩放或者旋转的效果，对于侦听gestures，iPhone/iPad也有三个事件：gesturestart，gestureend，gesturechange。
同时事件参数event有两个属性：scale，rotation。Scale的中间值是1，大于1表示放大，小于1表示缩小。
因为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和iPad浏览器不支持contenteditable元素。
-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);
}
如果不想设备侦测，可以用CSS媒体查询来专为iPhone/iPod定义样式。
@media screen and (max-device-width: 480px) {}
对于CSS3的媒体（media）查询，iPhone和iPad是不同的。通过这个技术，可以对设备不同的握持方向应用不同的样式，增强功能和体验。
iPhone是通过屏幕最大宽度来侦测的。是这样：
<link rel="stylesheet" media="screen and (max-width: 320px)" href="portrait.css" /> <link rel="stylesheet" media="screen and (min-width: 321px)" href="landscape.css" />
而iPad有点不同，它直接使用了媒体查询中的orientation属性。是这样：
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css" /> <link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css" /> <!--注意：如果两种样式表有显著地区别的话，这会分散用户注意力，所以这并不是必须要的组件。-->
之后只要将不同的样式分别定义出来就可以了。
网站的大图通常宽度都超过480像素，如果用前面的代码限制了缩放，这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够，我们可以用CSS让iPhone自动将大图片缩小显示。
@media screen and (max-device-width: 480px){
img{max-width:100%;height:auto;}
}
注意如果原图片非常大，或一个页面非常多图，最好还是在服务器端缩放到480像素宽，iPhone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。
iPhone的浏览器工具栏会在页面最顶端，卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间，特别是横向屏幕时。我们可以让它自动卷动上去。
<script type="application/x-javascript">
addEventListener("load", function()
{
setTimeout(hideAddressbar, 0);
}, false);
function hideAddressbar()
{
window.scrollTo(0, 1);
}
</script>
iPad开发完成后，会体现图标的地方主要有：
<rel="apple-touch-icon" href="images/youricon.png"/>
这是一个简单且最有用的源码，能够帮助你控制你的网络应用程序。由Matteo Spinelli创作，iScorll是一个开发项目，因为网络浏览器引擎Webkit工具套件（用于iPhone,iPod,iPad,Android 以及Palm上）不提供本地方式去滚动文章内部一个固定的高度/宽度元素。
这种不幸的情况防止任何Web应用程序有一个头和/或页脚的 position:absolute CSS属性，并滚动中心区域的内容。
iScroll代码非常易于使用。如果你喜欢iScroll，你需要这些类似的jQuery插件： jQuery Swipe和 JQTouch。
* 本机应用程序运行更快：使用更多的iPad的资源和性能。
* 不需要在网络上搜索：在苹果商店上一站式购买。
* 用户感觉更加舒适：他们知道程序是为他们设备特别制作的，不适合用HTML5/CSS3。
* 更容易打开和关闭：程序在打开和关闭的时候没有任何中断且不会丢失数据。
* 更难于开发：要求Objective-C 和Apple SDK的知识。
* 封闭的平台：很难为其他设备进行修改比如Android平台。
* 新兴的编码标准：HTML5，CSS3，JavaScript正在为网络带来令人惊奇的客户端功能；特别是本地/离线存储功能。
* 站点可以对任何浏览器进行定制：根据你的用户所操作的设备或浏览器切换样式表或重定向网页都。它可以使您的应用程序具有通用性。
* 开发简单：使用HTML，CSS和JavaScript创建iPad网络应用程序代替学习新语言。这些技能你应该已经具备了。
* 史蒂夫 乔布斯不能审查你的网络程序：网络是一个开放平台–意味着你皆在自己的掌控之中，不需要等待苹果商店的批准通过。
* 小众的市场，没有足够的支持：网络应用程序需要众多的力量，不仅需要吸引用户也需要开发者参与。