HTML5 msBackingStorePixelRatio and window.devicePi

问题:

Working with a javascript-based hybrid mobile app, I had problems with blurry text being drawn in a canvas. I found suggestions like this, which fixed things on Android and iOs. But not in Windows phone (our app uses IE10).

Adding a debug div and this code to the app:

var PIXEL_RATIO = (function () {
    var ctx = document.createElement("canvas").getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx.msBackingStorePixelRatio ||
              ctx.webkitBackingStorePixelRatio ||
              ctx.mozBackingStorePixelRatio ||
              ctx.oBackingStorePixelRatio ||
              ctx.backingStorePixelRatio || 1;
    return dpr / bsr;
}());
$('#debugg').append(" PR=" + PIXEL_RATIO);
var ctx = document.createElement("canvas").getContext("2d");
$('#debugg').append(" msr=" + ctx.msBackingStorePixelRatio);

Outputs "PR=1 msr=undefined", which indicates that the msBackingStorePixelRatio property is not defined on canvas contexts in IE10. I had a look in IE10 on a desktop PC, and using the developer tools I can't seem to find it there either - the same applies to window.devicePixelRatio.

What to do? I tried changing the default for dpr to 2 above, which makes it look nice on Windows Phone, and it works on an Android phone and an iPhone here. But can I depend on window.devicePixelRatio aways being set for non-MS platforms, or 2 being a generally appropriate value? Is there some other way to find a ratio to use when rescaling to high definition canvas drawing?