我有一个固定的页脚底部:0。它工作正常,除了在Android上它出现在屏幕下方。我有一些其他固定元素也出现在屏幕外。出于某种原因,我无法在屏幕上容纳它们,我已经四处搜索并尝试查看事物,但没有快乐。我的猜测是,如果我在视口中更改某些内容,它将修复它。该图片来自谷歌浏览器模拟S4上的网站,但同样的问题仍存在于我的实际手机上。页脚的代码应该只是让它位于底部,它在其他浏览器中工作正常。我可以将bottom的值更改为大约26px然后整个页脚在屏幕上变得可见,但这不是我想要的修复。有什么想法吗?
pdf.create(html).toStream(function (err, stream) {
if (err) return res.send(err);
res.type('pdf');
stream.pipe(res);
});
答案 0 :(得分:4)
尝试添加:
<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使浏览器更加一致地呈现所有元素并符合现代标准。它只精确定位于需要规范化的样式。)