CODEWITHSUNDEEP
javascripthtml
Mike_G
Mike_G

Reputation: 16502

position:fixed not working on mobile, works on desktop

I have a div that is anchored to the bottom of a page (position: fixed), works fine in a normal browser, but on mobile browsers (iphone, android, & WP7) it appears offscreen. If i zoom in then zoom out on mobile, i can see the div reposition itself to where it thinks the bottom is. It would be great if somebody would give a quick fix or point me in the right direction, but really im looking a good reference on the difference between how mobile browsers handle coordinates and desktops.

Upvotes: 2

Views: 1875

Answers (2)

6502
6502

Reputation: 114461

Mobile browsers by default try to trick the rendering engine into thinking that the browser window has a more computer-like size. This is needed because otherwise most web pages would be totally unusable on mobile devices with limited resolution (especially phones).

You can however use special tags to tell that the HTML page has been indeed designed for this kind of device, thus disabling all scaling and resolution virtualization logic in the mobile browser.

Something that can for example fix the problem for iOS devices and android devices is adding

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

This tag in the <head> section will allow your page and javascript code to deal with real device pixels and screen size.

Upvotes: 5

napolux
napolux

Reputation: 16074

Define "mobile browsers". Android browser supports it, Safari for iOS supports it from iOS5.

Opera mini and others maybe doesn't support position:fixed.

You could check this... http://seesparkbox.com/foundry/fix_your_position_even_in_ios_4

Upvotes: 0

Related Questions