Check if viewport meta tag is being used

Viewed 2827

I have a canvas that needs to be resized when the browser window is resized, so I have the following:

var resizeCanvas = function () {
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = (canvas.offsetWidth || canvas.width) * ratio;
    canvas.height = (canvas.offsetHeight || canvas.height) * ratio;
    canvas.getContext('2d').scale(ratio, ratio);
}

window.addEventListener('resize', resizeCanvas);

This works great, except on mobile devices scrolling triggers the resize event.

This is undesired as resizing the canvas clears its contents, which means as a mobile user scrolls, the canvas is always wiped.

Thanks to this answer I came up with a solution based on caching the width and double checking it, but based on my design, I really only need to resolve the issue for devices which are affected by my viewport metatag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Is there someway I can check if that meta tag is being used by the browser? I'm looking for something like:

if(viewportMetaTagIsUsed){
    //For mobile browsers
    window.addEventListener("orientationchange", resizeCanvas);
} else {
    //For desktop browsers
    window.addEventListener('resize', resizeCanvas);
}
8 Answers
Related