Response title
This is preview!
BlackBerry OS 5.0 not fully supported - solution
in jQuery Mobile
•
8 years ago
After a fair amount of research on the subject, I think it's safe to say that jQM works well on some BlackBerry OS 5 (B-grade) devices, but not all OS 5 devices. Unfortunately, the 9700 Bold did not work well at all and is still quite important to my business.
I believe that RIM has slightly different browsers running under the same OS, which pushes testing almost down to a device by device level, which is pretty crazy. At first I thought the issue was with how these browsers dealt with (or not) sprite images, but the problem was actually a little easier.
jQM uses @media in the CSS to target HD sprites to retina display devices, like the iPhone 4. The high resolution option always follows the standard, or default class info, which works great on any modern browser. The problem with at least some BB 5 browsers is that they don't understand @media and instead read the standard class info (low res sprite), skip right past the resolution questions the don't know what to do with, then replace the SD image with the HD image, in all cases.
I couldn't figure out a fix that would work within a single CSS file, so instead address the issue by first detecting all BB 4.2 - 5.0 browsers and passing an override file just to those phones. This CSS file simply points back to the standard definition sprite images and seems to do the trick. Thankfully, there are just a handful of classes that do the retina check, so this file is pretty small.
I'm not sure if there is a more elegant way to solve this problem, but clearly, it will diminish over time and we'll eventually remove this. I've attached the detection script below for anybody who is suffering from similar issues:
<script type="text/javascript">
var getcss=function (cssfile){
loadcss = document.createElement('link');
loadcss.setAttribute("rel", "stylesheet");
loadcss.setAttribute("type", "text/css");
loadcss.setAttribute("href", cssfile);
document.getElementsByTagName("head")[0].appendChild(loadcss);
};
var ua = navigator.userAgent;
if (ua.indexOf("BlackBerry") >= 0 && ua.indexOf("MIDP") >= 0)
{
getcss('styles/lowend_fix.css');
}
</script>
Cheers!
I believe that RIM has slightly different browsers running under the same OS, which pushes testing almost down to a device by device level, which is pretty crazy. At first I thought the issue was with how these browsers dealt with (or not) sprite images, but the problem was actually a little easier.
jQM uses @media in the CSS to target HD sprites to retina display devices, like the iPhone 4. The high resolution option always follows the standard, or default class info, which works great on any modern browser. The problem with at least some BB 5 browsers is that they don't understand @media and instead read the standard class info (low res sprite), skip right past the resolution questions the don't know what to do with, then replace the SD image with the HD image, in all cases.
I couldn't figure out a fix that would work within a single CSS file, so instead address the issue by first detecting all BB 4.2 - 5.0 browsers and passing an override file just to those phones. This CSS file simply points back to the standard definition sprite images and seems to do the trick. Thankfully, there are just a handful of classes that do the retina check, so this file is pretty small.
I'm not sure if there is a more elegant way to solve this problem, but clearly, it will diminish over time and we'll eventually remove this. I've attached the detection script below for anybody who is suffering from similar issues:
<script type="text/javascript">
var getcss=function (cssfile){
loadcss = document.createElement('link');
loadcss.setAttribute("rel", "stylesheet");
loadcss.setAttribute("type", "text/css");
loadcss.setAttribute("href", cssfile);
document.getElementsByTagName("head")[0].appendChild(loadcss);
};
var ua = navigator.userAgent;
if (ua.indexOf("BlackBerry") >= 0 && ua.indexOf("MIDP") >= 0)
{
getcss('styles/lowend_fix.css');
}
</script>
Cheers!
1