Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

Position:fixed Not Working On Mobile, Works On Desktop

Post a Comment
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.

Solution 1:

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

<metaname="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.

Solution 2:

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

Post a Comment for "Position:fixed Not Working On Mobile, Works On Desktop"