html,css,javascript in iphone
DESCRIPTION
TRANSCRIPT
Koubei F2E 善朋2010.04.20
iPhone 3G S
爱上 iPhone 3G 的理由
功能创新的电话通过 iPhone 上的 Multi-Touch 用户界面，你在通讯录、个人收藏、通话记录或者其他几乎任何地方中轻点名字或号码就可以直接进行拨号。
宽屏 iPod配备 3.5 英寸亮丽的显示屏， iPhone 上的内容 ─ 包括音乐、照片和视频等将显得更加出色。手指轻扫即可浏览歌曲和播放列表，使用 Cover Flow 欣赏你的专辑封面。
突破性的上网装置通过高速 3G 网络， iPhone 支持 HTML 邮件和先进的 Safari 网络浏览器，并内置搜索功能，为你带来移动装置上前所未有的互联网体验。 iPhone 擅长多任务操作，你能够一边打电话，一边发送邮件或者上网。
方向感应器， Multi-Touch ，智能键盘和中文输入。。。
我喜
欢iPhone 的
原因
源自一次 iPhone 网站开发
终于抛开 Fuck IE6 ， IE7 了 border-radiusbackground-originbackground-cliptext-shadowbox-shadowfirst-childlast-child ……
Happy Ending…
iPhone 手机网站开发总结1. HTML 的 head 标签内需要显示声明 meta 属性： <meta name=”viewport” content=”width=device-width; minimum-scale=1.0; maximum-scale=1″ /> ， minimum-scale 和 maximum-scale 主要作用是控制内容的显示比例。
2. 在使用 css3 的时候，要通过 -khtml 为前缀的方式， -webkit 的方式不管用。比如： -khtml-border-radius 。
3. 对 css 的 inline-block 支持不是很良好。
4. 没有 :hover 状态，不过可以通过 iphone 的 ontouchstart 和 ontouchend 两个独有的事件来模拟触屏特效。
5. 在横屏和竖屏的情况下，字体会发生变化。这可以通过在 html 中用 css 的属性： -webkit-text-size- adjust:none;
6. 支持大多数的 css3 属性：我使用到的就有 :last-child,:first-child,nth-child(n),:last-of- type,:first-of-type 等等，通过只用这些 css 属性，可是节省很多麻烦。
7. iphone 同时也好支持几个 class 类做判断的功能。
iPhone网站开发点滴
CSS
Javascript
HTML
iPhone 3G S
CSS“The practical upshot of this is that you need to do no cross-browser testing, and can use all the CSS3 you like. “
1. <link rel="stylesheet" type="text/css" href=“iphone.css” />
2. @media screen and (max-device-width: 480px){ /*--- iPhone only ---*/ }
3. -webkit-text-size-adjust 用于控制在横竖频切换的时候字体是否改变
4. 支持大部分的 CSS3 新特性，不过对于一些特效要使用 -khtml 前缀（比如： border-radius, background-origin 等等）
Javascript侦测 iPhone/iPodif((navigator.userAgent.match(/iPhone/i)) ||(navigator.userAgent.match(/iPad/i))) { if (document.cookie.indexOf("iphone_redirect=false") == -1) { window.location = “http://www.example.com/iphone/"; }}
侦测设备旋转方向iPhone 可以在横屏状态下浏览网页，有时候你会想知道用户设备的手持状态来增强可用性和功能。iPhone/iPad 中都有一个 window.orientation 的属性来判断在页面 onload 的时候设备向哪个方向旋转。
Touch EventsiPhone 是使用触屏的方式，所以就需要有手触屏和离开的时候的事件机制，幸好， iPhone做好了这方面的工作，提供了四个处理 touch 的事件：touchstart ， touchend ， touchmove ， touchcancel (when the system cancels the touch)
Gestures即是指两只手指接触屏幕的时候缩放或者旋转的效果，对于侦听 gestures ， iPhone 也有三个事件： gesturestart ， gestureend ， gesturechange 。同时事件参数 event 有两个属性： scale ， rotate 。 Scale 的中间值是 1 ，大于 1 表示放大，小于 1 表示缩小。
HTML<html><head> <title>iPhone 3G S</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <link … /></head> <body><!-- content here -- > </body> </html>
viewport 的声明的作用： tells Safari that the viewport should be the same size as the iPhone screen 。1. <meta name="viewport" content="width=780" />2. <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no" />3. <meta name="viewport" content="height=device-height,width=device-width" />
Special Links<a href="tel:12345678900">Call me</a><a href="sms:12345678900">Send me a text</a>
The Home Icon<link rel="apple-touch-icon" href="http://www.example.com/my-filename.png" />
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" />
之后只要将不同的样式分别定义出来就可以了。
Resource List:
Tutorial: Building a website for the iPhoneiPhone Development: 12 Tips To Get You Started10条小代码开发 iPhone友好的网站iPhone CSS—tips for building iPhone websitesCSS3 PreviewsiPad的CSS3媒体查询iPhone网站开发点滴
Thanks!!