Koubei F2E 善朋<br />2010.04.20<br />
iPhone 3G <br />S<br />
爱上iPhone 3G的理由<br />功能创新的电话<br />通过 iPhone 上的 Multi-Touch 用户界面,你在通讯录、个人收藏、通话记录或者其他几乎任何地方中轻点名字或号码就可以直接进行拨号。<br />宽屏 iPod<br...
border-radius<br />background-origin<br />background-clip<br />text-shadow<br />box-shadow<br />first-child<br />last-chil...
iPhone手机网站开发总结<br />1. HTML的head标签内需要显示声明meta属性:<meta name=”viewport” content=”width=device-width; minimum-scale=1.0; maxi...
iPhone 3G <br />S<br />     CSS<br />Javascript<br />    HTML<br />
CSS<br />“The practical upshot of this is that you need to do no cross-browser testing, and can use all the CSS3 you like....
Javascript<br />侦测iPhone/iPod<br />if((navigator.userAgent.match(/iPhone/i)) ||(navigator.userAgent.match(/iPad/i))) {<br ...
HTML<br />viewport的声明的作用:tells Safari that the viewport should be the same size as the iPhone screen。<br />CSS3媒体查询<br />对...
Resource List:<br />Tutorial: Building a website for the iPhone<br />iPhone Development: 12 Tips To Get You Started<br />1...
Thanks!!<br />
Upcoming SlideShare
Loading in …5
×

HTML,CSS,Javascript in iPhone

5,077 views

Published on

Published in: Technology, News & Politics
2 Comments
5 Likes
Statistics
Notes
  • 问一下,此为何意?
    document.cookie.indexOf('iphone_redirect=false') == -1
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 收藏,good
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,077
On SlideShare
0
From Embeds
0
Number of Embeds
68
Actions
Shares
0
Downloads
51
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

HTML,CSS,Javascript in iPhone

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

×