Fixed image not rendering on older mobile browsers e.g. blackberry
Question
I am trying to display an image advert fixed to the bottom of the screen (not the bottom of the text).
Not sure if this helps but the example page can be found at example page
Everything works on desktop and the latest phones. It doesn't work on some of the older mobile brosers. Any ideas? I've been trying for days now. It used to work but I must've changed something recently.
If I place the image at the bottom of the text in the html it works on all browsers.
In the javascript file I have
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>'
}
In the css I have
.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%
}
}
And in the html I have
<!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>
1 answers
solution1
0 2014-07-05 08:06:06
A lot of old browsers do not have the good standard to support everything that css has to offer even modern browsers lack some features. You have to check the browser compatability and im assuming you are using Opera or Opera mini. The MINI one is the worst for modern day developing. It lack all those good standards. You have to know that even modern IE for mobile(Windows Phone 8) does not support the fixed position.
Check this references:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.