我正在尝试显示固定在屏幕底部(而不是文本底部)的图片广告。
不确定这是否有帮助，但可以在 example page 找到示例页面
一切都适用于台式机和最新的手机。它不适用于某些较旧的移动兄弟。有任何想法吗？我已经尝试了好几天了。它曾经有效，但我最近一定改变了一些东西。
如果我将图像放在 html 文本的底部，它适用于所有浏览器。
在我的javascript文件中
getBannerHtml: function() {
return '<a id="ad-link" href="http://foo.co:80//landingpage?pr=21&wd=440&ht=245"><span id="banner-ad"><img class="advert-img" src="http://foo.co:8080/AdService/fileHandleAction?file=7A10B19B-2E51-4CCE-AB6A-319C382B4AA8" /></a>'
}
在我的CSS中
.banner-sticky {
bottom: 0px;
left: 0px;
width: 100%;
text-align: center;
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0);
/* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/
-webkit-backface-visibility:hidden;
}
.advert-img {
width: 90%
height: 100%;
}
@media only screen and (min-width: 320px) {
.advert-img {
width: 90%
}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
.advert-img {
width: 90%
}
}
@media only screen and (min-width: 700px) {
.advert-img {
width: 50%
}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
.advert-img {
width: 50%
}
}
@media only screen and (min-width: 1300px) {
.advert-img {
width: 30%
}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
.advert-img {
width: 30%
}
}
在我的 html 中
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="vicinity.css">
<script type="text/javascript" src="./jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="sticky" class="banner-sticky" style="position: fixed;">
</div>
<script type="text/javascript">
new Vicinity (pubReference, sessionId, function(result) {
$(function() {
$("#sticky").html(result.ad.getBannerHtml());
})
}, function(result) {
$("#sticky").html(result.ad.getBannerHtml());
$(function() {
displayResults(result);
})
});
</script>
</body>
</html>
最佳答案
许多旧浏览器没有良好的标准来支持 css 必须提供的一切，甚至现代浏览器也缺少一些功能。您必须检查浏览器的兼容性，我假设您使用的是 Opera 或 Opera mini。 MINI 是现代开发中最差的。它缺乏所有这些好的标准。您必须知道，即使是现代的移动 IE(Windows Phone 8)也不支持固定位置。
检查此引用:
关于javascript - 修复了图像无法在旧版移动浏览器上呈现的问题，例如黑莓，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24583814/