iPad, iPhone & other mobile devices alternate css.

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).
Then to add animation, and browser interoperability, JavaScript, and CMS queries fast became the norm as well as AJAX combining all three together.

Who ever thought the mobile telephone market would become part of the browsing world?
Most people like me with limited html and css knowledge let alone JavaScript, making your current site look good or work at all on iPhones, iPads, and the Touch was a problematic question with few solid answers.
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.
Wrong.

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).
The harder part is that if I understood right, the detection script works with a server sided CMS query, so for your normal html simple site, you’d better know JavaScript and PhP well.

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

different css rules for devices

iPad detect

Apple Developer site for iPhone iPad

The code below does this:

  • sets the original size of the screen view to 100%.
  • detects iPad resolution
  • detects iPhone resolution
  • [code]

    [/code]

    Share this post

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on email
    Email
    Share on print
    Print

    1 thought on “iPad, iPhone & other mobile devices alternate css.”

    1. I feel your pain Neil. I am in the middle of re-working my site as I had to pull down my last one completely and am currently using my Blog site I built to act as my main page until i get my new one fully de-bugged and working with I-pads. On top of that, uploading new work onto my blog page isn’t the easiest as its not what it was designed for… I didnt think when i took up Photography I would study XML and Html as much as i study lighting and posing. Keep fighting the good fight!

      Nick
      RelativeState

    Leave a Comment