Android上的固定元素出现在屏幕外

时间:2015-07-29 08:16:23

标签: android html css

我有一个固定的页脚底部:0。它工作正常,除了在Android上它出现在屏幕下方。我有一些其他固定元素也出现在屏幕外。出于某种原因,我无法在屏幕上容纳它们,我已经四处搜索并尝试查看事物,但没有快乐。我的猜测是,如果我在视口中更改某些内容,它将修复它。该图片来自谷歌浏览器模拟S4上的网站,但同样的问题仍存在于我的实际手机上。页脚的代码应该只是让它位于底部,它在其他浏览器中工作正常。我可以将bottom的值更改为大约26px然后整个页脚在屏幕上变得可见,但这不是我想要的修复。有什么想法吗?

enter image description here

pdf.create(html).toStream(function (err, stream) {
    if (err) return res.send(err);
    res.type('pdf');
    stream.pipe(res);
});

1 个答案:

答案 0 :(得分:4)

之前我有这个问题, 但只有低于4.4的Android版本,所以也许你可以告诉我你正在做什么的android版本,

尝试添加:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes"/> 

到你的

    <head></head>
Android上的

&lt; 2.3固定元素的设备表现为&#34; STATIC&#34;,(这就是为什么你的顶级元素可以正常运行,因为它是第一个元素并将其余部分推下来)

Android 2.3支持它,但你需要禁用视口缩放,因为我认为一旦写入bradfrost不能完全记住,它是不久前的

如果您遇到元素的闪烁,请尝试添加

    -webkit-backface-visibility: hidden; 

到您的css类,或者甚至用

扩展它
    -webkit-transform: translate3d(0,0,0); makes some devices run their hardware acceleration.
    -webkit-perspective: 1000;

它解决了闪烁,但事情是在一些Android版本上你只需要添加隐藏的背面可见性和一些其他2个规则(试验和错误)。我应该去第一个,(起初),因为添加翻译3d,将耗尽更多的电池

无论如何,如果它只是一个网站尝试上面的解决方案,

如果您正在制作一个cordova应用程序,请尝试添加https://crosswalk-project.org/,将您自己的webview添加到您的cordova包中,解决Android上的所有这些浏览器怪癖。

- 旁注

当元素的位置固定时,其显示将设置为块, 并且你有宽度:100%你的elment,所以如果你没有使用box-sizing:border-box; 该元素的宽度为100%+填充+边距添加到其中, 我不知道你的css的其余部分,也许你正在设置一个容器类的边距或填充 (使用chrome检查器检查元素的指标)

如果是这种情况,你可以做两件事 改变显示

width: 100% to auto;

或添加:http://www.paulirish.com/2012/box-sizing-border-box-ftw/

box-sizing: -webkit-box-sizing: border-box; 

或将normalize:https://necolas.github.io/normalize.css/添加到您的项目中,在您自己的css(链接标记)上方(Normalize.css使浏览器更加一致地呈现所有元素并符合现代标准。它只精确定位于需要规范化的样式。)