iPad , iPhone & other mobile devices alternate css.
The speed at which the evolution to multi device sites are needed is already long past a reasonable rate at which people can re-work their sites to conform with the new interfaces.
When web designers went from table based layout to css layout about 6 years ago the only real concern was browser compatibility (namely IE).
Who ever thought the mobile telephone market would become part of the browsing world?
This brings me to why I’m writing this.
When I reworked my site I stripped out all Flash swfs knowing they were taboo according to Steve Jobs.
That I would have hoped was all that was needed.
Although as good as it is, Safari uses something called web-kit to transform your html pages into something that fits into your screen and uses touch screen events rather than a mouse.
In my ignorance, I used iFrames or just a regular table with scrollable overflow to display images.
Simple and easy to use html, works on all browsers, no JS needed,
What I didn’t know was iFrames and all “divs” are not really scrollable with one finger, as one finger on the touch screen listens for an entire screen slide. If you have a frame or div with a specific width, it can’t scroll like that.
You can scroll with two fingers however, a bit jumpy but does work. So few people know this , so you would have an unusable site at most.
The search for a scrollable div on Google was not at all conclusive. There is a person who came up with a JS script for absolute positioned divs but not only complicated, it requires the divs to be the full width of the container, not a “window” as I wanted to use for image scrolling.
Further research showed that device detection scripts and queries would work. It seems that many large sites do exactly this. IF a mobile device is detected, the browser request for the pages is transferred to a device specific page (s).
I didn’t want to re-write my site into PhP just for a scrollable div on a static page.
Finally I found a simple solution on the Apple developer’s site, iPhone specific recommendations.
In the head of your html documents, you insert a meta tag that specifies a specific screen size and or orientation. What it does , is the browser parses the css, and if the conditions are met in the meta tags, then that specific css is used. It can be a linked external file or inline. In theory inline would have a higher specificity but it seems to work fine in an external style sheets.
In my case I when an iPhone or iPad falls into the right conditions set in the tags, the special css is used and the normal full size browsers ignored
By changing the overflow of the divs on the image pages, I changed scrollable to overflow : visible
I also added specific Meta tags for the iPad as it has a different resolution so it needs it’s own met tag.
When changing the css for the iPad you can even add yet another line to specify orientation, a nice way to move divs around orientation dependent.
I am pasting some code in here but you can always view any page’s source code in the browsers. Firefox has an plug in called Firebug that shows you everything in a site including the scripting and DOM.
targeting css device specific
The code below does this: