2012-01-24 26 views
2

我有一个固定在页面底部的div(position:fixed),在普通浏览器中工作正常,但是在移动浏览器上(iphone,android,& WP7)它出现在屏幕外。如果我放大,然后缩小移动,我可以看到div重新定位到它认为底部的位置。如果有人能够快速修复或者指引我朝着正确的方向发展,那将是非常好的事情,但是我真的很关心移动浏览器如何处理坐标和桌面之间的差异。position:fixed not working on mobile,在桌面上工作

+2

你的麻烦是什么手机浏览器? – laymanje

+0

[这里](http://bradfrostweb.com/blog/mobile/fixed-position/)深入探讨了你在移动环境中可以做什么。 – Andrew

+0

也许在这里找到答案会帮助你:http://stackoverflow.com/questions/2784889/android-web-app-positionfixed-broken – StevenGilligan

回答

3

默认移动浏览器试图欺骗渲染引擎以为浏览器窗口中有更多的像电脑一样大小。 这是必要的,因为否则大多数网页将在分辨率有限的移动设备(尤其是手机)上完全无法使用。

然而,您可以使用特殊标签来告诉HTML页面确实是为此类设备设计的,因此会禁用移动浏览器中的所有缩放和解析度虚拟化逻辑。

的东西,可以例如修正为iOS设备和Android设备的问题是增加

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

这个标签在<head>节将让您的页面和JavaScript代码来处理真实设备的像素和屏幕尺寸。