single page for mobile/iphone and desktop

Question

i have developed a mobile version of a page and it uses some mobile specific java and css

i have come across many solutions to point mobile/iphone users to that specific page and desktop users to original webpage.

but what i want is that i get both things in one page and when user is on mobile that certain part of javascript and css run while on same page without user being redirected to other pages.

is this possible

Answer 1

Yes, that's possible. For CSS just use media attribute for link element:

<link rel="stylesheet" href="..." media="handheld" />

For JS you'll have to detect using user agent signature whether or not visitor is using mobile device.

Answer 2

You might find the recent A List Apart article, Responsive Web Design, useful. It concentrates mostly on CSS, using media queries to separately target small screen devices, eg.:

<link rel="stylesheet" type="text/css"
    media="screen and (max-device-width: 480px)"
    href="shetland.css" />

You might also want to have a look at Modernizr, it won't help much with detecting a mobile browser specifically, but it does make it easy to do feature detection so you could only load an run particular scripts if certain functionality is available.