Сообщение от Mr_F_
у меня есть
window.onresize = function(e) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
срабатывает при смене размера окна на винде или вытаскивании снизу консоли. не работает на телефонах?
а чёрт, точно, забыл, там же пропорции могут меняться. |
Не только пропорции меняются что требует пересчёт матрицы проекции, но также и это не будет стабильно работать на всех платформах. Проблема в том что евент onresize на практике срабатывает часто до того как ориентация полностью поменялась и новый размер был присвоен, т.к. смена ориентации обычно сопровождается анимацией.
Есть евент "orientationchange":
window.addEventListener('orientationchange', function() {
// ...
}
Он также будет срабатывать во время ориентации, и значения window.innerWidth = могут часто разводить.
Кстати для ориентации можешь заюзать также window.orientation - это чисто для константы.
Решение я нашёл, небольшой костыль, но не хак:
Заводим элемент вначале всего body:
Стиль у него:
#ruler {
position: fixed;
width: auto;
height: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
visibility: hidden;
}
И далее при onresize, orientationchange а также каждые 200 мс, проверяй его размер (именно этого элемента). Т.к. проверка его размера "насильно" заставит броузер пересчитать размеры (reflow), что выдаст реальные данные:
var bounds = ruler.getBoundingClientRect();
if (bounds.width != oldWidth || bounds.height != oldHeight) {
// размер изменился
}
Я тестировл на куче платформ работает отлично, и реагирует на все евенты.
Заметил что на некоторых платформах нужно на 4 пикселя меньше делать.
Также не забудь указать overflow:hidden в css для body, чтобы предотвратить скроллинг.