Position: fixed smartphones

HTML & CSS
1

Hi
I’m building a site with a footer that’s fixed at the bottom of the browser window.

Is there any alternative to position: fixed that would work on a smartphone?

If not, how would I create some alternative code for smartphones?

Thanks

2

If not, how would I create some alternative code for smartphones?
From what I have heard most mobile devices have trouble with fixed positioning. I suspect you are aware of that hence the reason you are wanting an alternative.

Why not just give mobiles a normal static footer? Just reset it to position:static; in your mobile css.

3

Thanks - that confirms what I was thinking. I have read up on it a bit but what, in the opinion of people on this forum, is the best way to target mobiles via CSS?

4

Hi,

Admittedly I have not done any development for mobile devices but there is a new forum here at SP for them.

Developing For Mobile Devices

One good example I can show you is the W3C Site. When you go to the site you get a viewing option at the top of the page. You can click “mobile” and the page will be displayed for mobile devices.

Take at look at the page source in the <head> element and you will see how they have set up the cascade for the stylesheets using (min-width: 481px) and (max-device-width: 480px) on the media rules.

Desktops get the advanced CSS with the @import media query while mobiles get the minimum CSS.

<link rel="stylesheet" href="/2008/site/css/[COLOR=Blue]minimum[/COLOR]" type="text/css" media=[COLOR=Blue]"handheld, all"[/COLOR] />
<style type="text/css" media="print, [B][COLOR=DarkGreen]screen and (min-width: 481px)"[/COLOR][/B]>
/*<![CDATA[*/
@import url("/2008/site/css/[B][COLOR=DarkGreen]advanced"[/COLOR][/B]);
/*]]>*/
</style>
<link href="/2008/site/css/[COLOR=Blue]minimum[/COLOR]" rel="stylesheet" type="text/css" media=[COLOR=Blue]"handheld, only screen and [B](max-device-width: 480px)[/B]"[/COLOR] />
<meta name="viewport" content="width=device-width" />