Quickest way to get around not being able to drag on an iDevice?

Question

I have a site that uses a jQuery UI slider.

I fired it up in my iPhone, and realised that when trying to drag the slider (by dragging my finger over it), it scrolls the site left to right and leaves the slider unaltered.

It appears I can only slide when the site is at a zoom level that shows the entire page. I think you can force this zoom level with a meta element. However, the site's content is quite illegible at this zoom level (at least on an iPhone's screen).

What is the quickest way to get around this? Is it possible, on mousedown (I guess the iPhone will fire this when the finger is placed on it) to zoom the site to fit-all so the user can actually use the slider?

And if the quickest way is hacky/ugly, what are some better solutions?

I am using jQuery.

Many thanks!

Answer 1

Try adding this meta-tag

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

I copied it from mrdoob's harmony webapp. I know that when you open his harmony app from android webkit browser, you can still draw around by sliding your finger. It doesn't make the entire web page slide.

Answer 2

Do you have to use the slider element? I also use the slider element on a site but if javascript is disabled or not available, I show two selectboxes instead of the slider.