Web Development for iPhone: Tips, Tricks, and Advanced Techniques

Wed,6/11 10:30

  • JavaScripe touch and gesture
  • CSS visual effects
  • Storing user data
  • Tips and tricks

  • Touch and Gesture Events
  • Multi-touch for JavaScripe!
  • More interactice contriols

Why not mouse events?
  • Compatibility with existing web pages
  • Simplicity for web apps
Touch Events in Detail
  • touchstart
  • touchMove
  • touchEnd
  • touchCancel
preventDefault() to disable default browser

Move , End as the same as it

function tuchstart(event){ }
And Move,End


WebKit now has rudimentary support for specifying transforms through CSS. Boxes can be scaled, rotated, skewed and translated. The current nightly builds support affine transformations.

A transform can be specified using the -webkit-transform property. It supports a list of functions, where each single function represents a transform operation to apply. You can chain together operations to apply multiple transforms at once to an object (e.g., if you want to both scale and rotate a box). The supported primitives are:

scale, scaleX, scaleY

Scale an object around the transform origin. These functions take a number as an argument. The number can be negative (if you want to flip an object).
rotate - Rotate an object around the transform origin. This function takes a CSS angle (e.g., degrees or radian units).

translate, translateX, translateY

Translate an object. These functions take lengths or percentages as arguments. Percentages are relative to the border box of the object.

skew, skewX, skewY

Skew an object. These functions take CSS angles.


Specify a full affine transform matrix. This function takes six values. The last two values are the tx and ty, and they can be lengths or percentages.

In addition to the -webkit-transform property, we have introduced a -webkit-transform-origin property that allows you to specify the origin of the transform. It has the same syntax as background-position and defaults to the center of the object (so that scales and rotates will be around the center of the border box by default).

At the moment transforms do not affect layout, so they are similar to relative positioning in that respect. We are exploring ideas for how to do transforms in ways that could affect layout.

How to make no callout:

-webkit-touch-callout:default | none ;

How to make a highlight:

-webkit-tap-highlight-color: rgba(0,0,0,);

You can specify an icon for a single page

Web apps can look good and feel good,too

0 评论: