iPad网页开发教程及规则

标签: ipad 网页 开发 | 发表时间:2013-04-03 08:19 | 作者:gtd03
出处:http://blog.csdn.net

iPad开发的局限性

  1. 在iPad上使用Safari浏览普通网站网页的时候,网页因为太大而导致需要手动放大缩小或者滑动,虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道,但时间久了我们还是会发现这样做并不方便,给用户带来的感受并不十分好。
  2. 不支持Flash在没有越狱的iPad Safari中,网站的Flash都是无法显示的,但可以通过第三方软件或插件或者浏览器来解决,不过,即使不能显示Flash,你一样能够用HTML5和CSS3实现同样的效果。
  3. 没有鼠标光标这意味着鼠标属性,例如鼠标悬停属性是不可能有的。你或许可以为这个找到一些变通的办法,但是到你的用户那里这些该如何工作将会是困难的事。
  4. 滚动条不能按照预期那样起作用滚动条不能显示包含了充满过多分区的内容。框架也存在高度和宽度的问题。另外,滚动过程中需要两个手指的手势。(我们将在下文中进行充分的讨论)
  5. 不支持CSS固定布局HTML 元素 position:fixed CSS属性不能正确显示,常常会使得页面停留在第一屏,无法向下翻页、放大缩小。

iPad用户侦测:User Agent(用户代理)

随着移动设备上网的普及,很多网站都会进行客户端浏览器类型侦测,主要是靠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模拟器测试网页情况,你还是能够通过一下方式进行测试:

  1. 通过Mac OS X 或 Windows版本的Safari浏览器充当模拟器Safari菜单->偏好设置->高级->选中 在菜单栏显示”开发菜单”,这是在菜单栏就会出现”开发”这个菜单项菜单”开发”->用户代理->其他,在弹出的对话框中粘贴上述User Agent代码,点击确定以后,就可以用Safari验证页面是否适合iPad显示了。
  2. 用谷歌浏览器充当模拟器命令行下输入:
    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"
  3. Javascript侦测iPad的User Agent,然后转向到对应版本的URL。
    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";
       }
    }
  4. PHP脚本侦测User Agent
    if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) {
    header('Location: http://ipad.www.opensoce.com');
    exit();
    }
  5. Apache侦测转向
    RewriteCond %{HTTP_USER_AGENT} ^iPad
      RewriteRule ^index\..*$ ipad.html [L]
      RewriteCond %{HTTP_USER_AGENT} ^iPhone
      RewriteRule ^index\..*$ iphone.html [L]
  6. Nginx侦测转向
    if ($http_user_agent ~*iPad ) {
       proxy_pass  http://ipad.www.opensoce.com;
    }
    if ($http_user_agent ~*iPhone ) {
       proxy_pass  http://iphone.www.opensoce.com;
    }

使用W3C标准网站技术

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

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表示缩小。

模拟: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效果 */ }

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

用 textareas 取代 contenteditable

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);
}

iPhone/iPad才识别的CSS

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

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

CSS3媒体查询

对于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图标

iPad开发完成后,会体现图标的地方主要有:

  1. iPad桌面,不大于72×72的png格式图标;iPhone桌面,不大于57×57的png格式图标,在Xcode中的资源部分添加,并在 xxxInfo.plist中设置Icon file属性为添加的图片资源名称。图标文件不需要做圆角和反光,iPad/iPhone自己会完成。
  2. App Store中软件简介中显示的缩略图,在打包生成zip文件的根目录放置的文件名为iTunesArtwork的jpg图片,大小要求在512×512以下
  3. 如果你的用户将你的网站添加到home screen,iPhone会使用网站的缩略图作为图标。然而你可以提供一个自己设计的图标,这样当然更好。图片是57×57大小,png格式。不需要自己做圆角和反光,系统会自动完成这些工作。然后将下面这条加入head中:
    <rel="apple-touch-icon" href="images/youricon.png"/>

用iScroll控制你的触摸滚动

这是一个简单且最有用的源码,能够帮助你控制你的网络应用程序。由Matteo Spinelli创作,iScorll是一个开发项目,因为网络浏览器引擎Webkit工具套件(用于iPhone,iPod,iPad,Android 以及Palm上)不提供本地方式去滚动文章内部一个固定的高度/宽度元素。

这种不幸的情况防止任何Web应用程序有一个头和/或页脚的 position:absolute CSS属性,并滚动中心区域的内容。

iScroll代码非常易于使用。如果你喜欢iScroll,你需要这些类似的jQuery插件: jQuery SwipeJQTouch

iPad本机应用程序

    * 本机应用程序运行更快:使用更多的iPad的资源和性能。
    * 不需要在网络上搜索:在苹果商店上一站式购买。
    * 用户感觉更加舒适:他们知道程序是为他们设备特别制作的,不适合用HTML5/CSS3。
    * 更容易打开和关闭:程序在打开和关闭的时候没有任何中断且不会丢失数据。
    * 更难于开发:要求Objective-C 和Apple SDK的知识。
    * 封闭的平台:很难为其他设备进行修改比如Android平台。

iPad网络应用程序

    * 新兴的编码标准:HTML5,CSS3,JavaScript正在为网络带来令人惊奇的客户端功能;特别是本地/离线存储功能。
    * 站点可以对任何浏览器进行定制:根据你的用户所操作的设备或浏览器切换样式表或重定向网页都。它可以使您的应用程序具有通用性。
    * 开发简单:使用HTML,CSS和JavaScript创建iPad网络应用程序代替学习新语言。这些技能你应该已经具备了。
    * 史蒂夫 乔布斯不能审查你的网络程序:网络是一个开放平台–意味着你皆在自己的掌控之中,不需要等待苹果商店的批准通过。
    * 小众的市场,没有足够的支持:网络应用程序需要众多的力量,不仅需要吸引用户也需要开发者参与。
作者:gtd03 发表于2013-4-3 16:19:00 原文链接
阅读:65 评论:0 查看评论

相关 [ipad 网页 开发] 推荐:

iPad网页开发教程及规则

- - CSDN博客Web前端推荐文章
在iPad上使用Safari浏览普通网站网页的时候,网页因为太大而导致需要手动放大缩小或者滑动,虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道,但时间久了我们还是会发现这样做并不方便,给用户带来的感受并不十分好. 不支持Flash在没有越狱的iPad Safari中,网站的Flash都是无法显示的,但可以通过第三方软件或插件或者浏览器来解决,不过,即使不能显示Flash,你一样能够用HTML5和CSS3实现同样的效果.

iPad开发背后的故事

- Dennis Lee - cnBeta.COM
《史蒂夫・乔布斯传》揭露了iPad开发过程中一些有趣的背后的故事. 当乔布斯第一次敲定iPad的概念后,乔纳森制造了大量概念效果图,目的就为了确定iPad的尺寸和长宽比. 苹果最终决定采用9.7"的屏幕,长宽比为4:3,可是,在确定之前,他们尝试过各种不同的尺寸和长宽比.

iPhone和iPad Web开发上手指南

- - 互联网的那点事
感谢上天,iPhone操作系统上的Safari浏览器幸好是一款优秀的浏览器. 跟桌面版的Safari 4一样,它对CSS3及HTML5有良好的支持. 另外它也提供若干一流的界面元素供即用,不过这些界面元素在iPhone和iPad之间有时还存在差别. 另外,由于iPhone操作系统面世已经很长一段时间了,网络上有很多资源可供利用.

通过 Mac 远程调试 iPhone/iPad 上的网页

- - 我爱水煮鱼
我们知道在 Mac/PC 上的浏览器都有 Web 检查器这类的工具(如最著名的 Firebug)对前端开发进行调试,而在 iPhone/iPad 由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非常不方便,所以一直没有 Web 检查器这一类工具,但是 iOS 6 的发布解决了这个问题. iOS 6 给 Safari 带来了远程的 Web 检查器工具(Remote Web Inspector),你可以通过模拟器或者真实的设备(通过 USB 连上 Mac)进行调试.

传苹果开发iPad Mini:250-300美元 2012年面市

- zs - cnBeta.COM
Ticonderoga Securities分析师布莱恩・怀特(Brian White)表示,苹果正在开发低成本iPad,这款产品可能将于2012年初面市. 怀特将这款低成本iPad称作iPad Mini,并预计这款产品的售价将为250至300美元. iPad Mini的尺寸可能将与iPad一致,低成本并不意味着尺寸的减小.

网易摄影推出html5开发的iPad APP

- - HTML5研究小组
网易摄影精选是网易摄影(http://pp.163.com/)出品的第一款基于html5开发的ipad应用,聚焦于用户浏览美图时的体验,崇尚极简主义的设计,一切皆为用户看到自己喜欢的高清美图而服务. 没有复杂的功能,用户不需要注册、填写任何信息就能使用. 网易摄影精选采用目前比较流行的混搭模式(native+web)开发,native层选用phonegap开源框架用来提供web层对设备功能的支持,web层基于网易自主研发的前端开发框架用来实现页面布局及业务逻辑,应用对部分HTML5/CSS3技术做了实践,整个应用大小只有500K左右.

新一代iPad应用开发:HTML5痛并快乐着!

- - HTML5研究小组
苹果新发布的iPad以其高分辨率赢得了消费者的青睐. 平板电脑的iOS 5.1 操作系统支持HTML 5数据存储,但不提供对HTML5的扩展支持,平板电脑的Web性能与iPad 2也相差无几. 类似的问题很多,多到我们不能称之为“挫折”,也没有人会觉得苹果来为新兴的Web标准提供一如既往的积极支持会有所反悔.

Web VS Native–LinkedIn做出的选择:iPad App95%使用HTML5开发

- - Web App Trend
Jolie O’Dell 是VentureBeat的记者. LinkedIn iPad版本应用其中的95%使用HTML5开发,这在业内激起千层浪,下面是VentureBeat记者对LinkedIn移动开发团队主管Kiran Prasad进行的采访. 首先,我们请读者们先试着猜一下LinkedIn为新iPad开发的应用中的移动Web技术占到多大的比例.

iPad网页浏览量超过iPhone 占领平板电脑网页浏览量的97%

- xing - cnBeta.COM
数据研究公司comScore今天发布的网页浏览量数据显示iPad继续统治着平板电脑市场,并且已经超过iPhone. 在iOS设备中,iPad的网页浏览量占领了46.8%,而iPhone占有42.6%.

24款免费为iPad开发者提供的UI工具推荐

- Heng Yang - ITeye资讯频道
iPad如今风靡全球,移动开发者也趋之若鹜,本文搜集了24款免费的iPad应用的用户界面开发工具,以帮助开发者提高开发效率. 2.  iPad PSD格式的GUI工具. 4.  iPad GUI矢量元素. 7.  iPad Omnigraffle模板. 8.  iPad 图标PSD模板. 10.  iPad 线框模型.