Blog

WKTouch - Multi-touch JavaScript plugin for Apple iOS

19 July 2010 | 7:53 pm |

I've just released a little JavaScript plugin called WKTouch up on Google Code. It's a tiny plugin for Apple's iOS Safari browser, enabling multi–touch drag, scale and rotate on HTML elements.

Using the plugin is pretty simple. Firstly, include the main JavaScript file in the header of your HTML document:

<script type="text/javascript" src="WKTouch.js" ></script>

Next, add the following CSS to your stylesheet. Please note, your HTML element must use absolute positioning:

.touch {
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none; 
}

#element1 {
    position: absolute;
    left: 10px;
    top: 10px;
    height:120px; 
    width:120px;
    background-color: blue;
}

Now add the class name and id to your HTML element:

<div class="touch" id="element1"></div>

Finally, in the head of your HTML file, include the following JavaScript to create a new instance of the plugin, making sure to pass it the id of your HTML element:

<script type="text/javascript"> 
window.onload = function() {                     
    var element1 = new WKTouch('element1').init();       
};
</script>

That's it! You can view a fully working online demo here using multiple instances of the plugin on one page. You can also download or checkout the source over on Google Code.

Pixel perfect icons for iOS devices using CSS Media Queries

2 July 2010 | 2:26 pm |

Jesse Dodds has written an excellent article on how to serve pixel perfect web clip icons for Apple iOS devices using CSS3 Media Queries. Well worth a look.

<!-- iPHONE 3G WEB CLIP ICON -->
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="iOS-57.png" />
<!-- iPAD WEB CLIP ICON -->
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="iOS-72.png" />
<!-- iPHONE 4 WEB CLIP ICON -->
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="iOS-114.png" />

Targeting iPhone 4 using CSS Media Queries

26 June 2010 | 4:12 pm |

With the release of iPhone 4 and it's 326ppi display, there has been a fair bit of speculation as to what impact this would have on mobile web apps and websites that are optimised for mobile screen sizes. How would web developers target both older iPhones with a 480x320 display, as well as the iPhone 4's 960x640 display? Would we need separate CSS stylesheets for each device? How would images need to be optimised for the new screens?

It turns out that CSS media queries testing for the older iPhone displays still work on iPhone 4. It's all down to Mobile Safari utilising a 'device to pixel ratio' density of 2. There is actually a distinct difference between a device (screen) pixel and a pixel that we typically define in CSS. For example, when the iPhone 4 browser viewport is equal to the device width, 1 CSS pixel actually translates to 2x2 device pixels. For those interested, there is a quite old (but very relevant) Webkit article about high dpi websites. It makes for an interesting read.

This is largely good news for mobile web developers, as very little needs to be done to our mobile CSS stylesheets for iPhone 4. Device pixels are translated to CSS pixels automatically. But what about images? Well, this is where some work needs to be done. In order for images to look crisp on the new iPhone 4 display, we now need to serve images that have a higher ppi than the standard web traditionally uses. To do this, the iPhone 4 (and any other high ppi device) can be targeted using the following CSS media query (Notice I have included rules both with and without the -webkit venor prefix):

<!-- HIGH PPI DEVICES -->

<link rel="stylesheet" href="highres.css" media="only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)" />

I won't go into great detail on how to best serve images, but it basically involves creating images that are double the pixel size that you would traditionally need (e.g. a 100x50 pixel image translates to 200x100 pixels). You can then set the background size in CSS so the large images still take up the same number of CSS pixels as they would on a normal display. Walt Dickinson has already written a nice article that has some more info on how to do this. I advise you to go read it. Alternatively, you could inspect the highres.css stylesheet on my site here.

Finally, one last tip – you can also test for the same value using using JavaScript:

if (window.devicePixelRatio == 2) {

//Targeted code goes here

}

Adaptive CSS layouts using Media Queries

23 June 2010 | 10:03 pm |

Over the past few weeks I have been refining the CSS3 Media Queries on this site in order to try and create an adaptive layout that can scale and resize to any window or screen size, whether it be on desktop, tablet or mobile device. I think (hope) that I've got things flowing pretty smoothly now, so I thought I would post the queries here so that others can adapt them:

<!-- CSS MAIN STYLESHEET -->
<link rel="stylesheet" href="styles.css" media="all" />

<!-- LAYOUTS SMALLER THAN 650px AND MOBILES -->
<link rel="stylesheet" href="mobile.css" media="handheld, screen and (max-width: 650px), screen and (max-device-width: 480px)" />

<!-- LAYOUTS BETWEEN 651px/1024px AND iPAD -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width:651px) and (max-width: 1024px), screen and (min-device-width: 768px) and (max-device-width: 1024px)" />

I could have included all three media queries inside a single CSS file using the @media rule, but I quite like to keep things separate for simplicity. For now, I have chosen to use three individual stylesheets. The main site stylesheet (styles.css) is used as a master, and then the separate mobile.css and tablet.css stylesheets override certain CSS rules in the main stylesheet, to provide an optimised view that is dependant on the media query being used. I have also used queries based on both min/max-width and min/max-device-width, so that both desktop browsers and intermediate size devices can also make use of the adaptive stylesheets. Have a go at resizing your browser window to see the results.