HTML,CSS,Javascript in iPhone （转自 koubei F2E 善朋）

lixinlixin2008

浏览: 152664 次
性别:
来自: 北京

最近访客更多访客>>

723499280

anrenady

sgamin1001

cusalt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML CSS JavaScript webkit Safari

原链接如下：
http://www.slideshare.net/supersha/htmlcssjavascript-in-iphone

HTML,CSS,Javascript in iPhone - Presentation Transcript

   1. Koubei F2E 善朋
      2010.04.20
   2.
   3. iPhone 3G
      S
   4. 爱上iPhone 3G的理由
      功能创新的电话
      通过 iPhone 上的 Multi-Touch 用户界面，你在通讯录、个人收藏、通话记录或者其他几乎任何地方中轻点名字或号码就可以直接进行拨号。
      宽屏 iPod
      配备 3.5 英寸亮丽的显示屏，iPhone 上的内容 ─ 包括音乐、照片和视频等将显得更加出色。手指轻扫即可浏览歌曲和播放列表，使用 Cover Flow 欣赏你的专辑封面。
      突破性的上网装置
      通过高速 3G 网络，iPhone 支持 HTML 邮件和先进的 Safari 网络浏览器，并内置搜索功能，为你带来移动装置上前所未有的互联网体验。iPhone 擅长多任务操作，你能够一边打电话，一边发送邮件或者上网。
      方向感应器，Multi-Touch，智能键盘和中文输入。。。
   5. border-radius
      background-origin
      background-clip
      text-shadow
      box-shadow
      first-child
      last-child
      ……
      Happy Ending…
   6. 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网站开发点滴
   7. iPhone 3G
      S
      CSS
      Javascript
      HTML
   8. 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等等）
   9. Javascript
      侦测iPhone/iPod
      if((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/";
      }
      }
      Touch Events
      iPhone 是使用触屏的方式，所以就需要有手触屏和离开的时候的事件机制，幸好，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表示缩小。
      侦测设备旋转方向
      iPhone可以在横屏状态下浏览网页，有时候你会想知道用户设备的手持状态来增强可用性和功能。
      iPhone/iPad中都有一个window.orientation的属性来判断在页面onload的时候设备向哪个方向旋转。
10. HTML
      viewport的声明的作用：tells Safari that the viewport should be the same size as the iPhone screen。
      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" />
      之后只要将不同的样式分别定义出来就可以了。
      <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>
      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" />
11. Resource List:
      Tutorial: Building a website for the iPhone
      iPhone Development: 12 Tips To Get You Started
      10条小代码开发 iPhone友好的网站
      iPhone CSS—tips for building iPhone websites
      CSS3 Previews
      iPad的CSS3媒体查询
      iPhone网站开发点滴

分享到：