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);
}