WKTouch and WKSlider now hardware accelerated in Mobile Webkit / Safari
| Webkit
I've recently pushed a few updates to WKTouch and WKSlider on GitHub that enable full hardware acceleration in Mobile Webkit / Safari. iOS users now get a considerable performance boost when dragging and manipulating objects and UI elements. This is achieved by using CSS 3D transformations where available, as iOS devices offload these processes to the device GPU. For Webkit devices that do not yet support CSS 3D transforms (such as Android), the plugins provide a fallback using regular 2D transformations.
Another small improvement to WKTouch is the ability to drag an object at the same time as performing a two finger scale / rotate gesture.
Head over to the code section to try out demos of each plugin, or check out the source over on GitHub.
Like this article? Share on Twitter.
New sizes attribute in iOS 4.2.1 for web clip icons
| Webkit
A small but relatively undiscovered new feature in iOS 4.2.1 is the new 'sizes' attribute for defining different sized web clip icons. Instead of using previous methods, Apple now have a custom attribute you can use to target different device resolutions on iOS. Here's an example:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
Now what we really need is for this new attribute to also work on apple-touch-startup-image, so we can finally define different resolution startup images.
Like this article? Share on Twitter.
iOS 4.2.1 brings some major new features to Mobile Safari
| Webkit
Apple has just released iOS 4.2.1 which offers some really interesting new features and improvements to Apple's Safari mobile browser. New features include access to the Accelerometer via the DeviceMotion event class, Gyroscope event data via the DeviceOrientationEvent class, an implementation of HTML5 WebSockets API and a StyleMedia class for querying CSS features via JavaScript. There is also improved support for web fonts amongst other useful enhancements.
There is a nice blog post detailing many of the new features over on Mobile Web Programming.
I'd still like to see access to things such as the iPhone camera, photo library and contacts — but this is a great looking update for iOS users and mobile web developers.
Like this article? Share on Twitter.
Multi touch gestures using Webkit
| Webkit
I thought it might be useful if I posted a working example that demonstrates how to use touch and gesture events on the iPhone/iPad using Safari and Webkit.
I won't go into depth covering the basics of how touch events work, you can read about that in this article. What I will go into, is the basics of how my template works, so that you can easily adapt it for your own applications.
First, feel free to view the live demo, and read the documented code.
The HTML template file consists of a single square block that can be touched, dragged, resized and rotated using touch events. The JavaScript file provides a basis for handling six different types of touch event. The first three, touchstart, touchmove and touchend are all used to handle single finger touch events. In the example, the square block can be touched and dragged around the screen using a single finger. You can easily see when a touchstart event is triggered, as the square will turn blue in colour. If you drag your finger when the square is blue, a touchmove event is then triggered, and the square will follow your finger. When you release your finger, a touchend event is triggered, and the square will turn back to its original colour and remain where you left it on the screen.
The next three touch events, gesturestart, gesturemove and gestureend, are all used to handle multi touch events. These class as any touch event that uses more than one finger. In the example, a gesturestart event is indicated by the square block turning red in colour. A gesturechange event is triggered by performing a typical two finger pinch/zoom/rotate gesture, which has the effect of scaling and rotating the square. When your fingers are released, a gestureend event is triggered, and the square turns back to its original colour. It will also remain at the scale and angle of rotation that you left it at.
Take some time to read through the documented code and understand the way events are triggered. Any questions, please feel free to get in touch.
Like this article? Share on Twitter.