У меня есть холст, который необходимо изменить при изменении размера окна браузера, поэтому у меня есть следующее:
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);
Это отлично работает, за исключением того, что прокрутка мобильных устройств запускает изменение размера.
Это нежелательно, так как изменение размера холста очищает его содержимое, что означает, что при прокрутке мобильного пользователя холст всегда стирается.
Благодаря этому ответу я придумал решение, основанное на кешировании ширины и двойном проверке, но на основе моего дизайна мне действительно нужно только решить проблему для устройств, на которые влияет метатаг моего просмотра:
<meta name="viewport" content="width=device-width, initial-scale=1">
Есть ли способ проверить, используется ли этот метатег браузером? Я ищу что-то вроде:
if(viewportMetaTagIsUsed){
//For mobile browsers
window.addEventListener("orientationchange", resizeCanvas);
}
else{
//For desktop browsers
window.addEventListener('resize', resizeCanvas);
}
