Cтолкнулся с проблемой отображения HTML5 игр, сделанных на GameMaker Studio, на мобильных устройствах (iOS и Android). Ремарка: с HTML/CSS и еже с ними почти не сталкивался, опыта никакого.
Для примера, игра в 960*640. Взял такое изображение:
При запуске на телефоне вижу такую картину:
На экран также выводится разрешение браузера, которое возвращает движок. Как видно, оно в три раза меньше реального разрешения. Естественно, первым делом подумал, что ошибка в движке. Проверил, что возвращает непосредственно браузер - значения были те же самые. Задал вопрос и ответ histrionis'а натолкнул на мысль, что viewport как-то может помочь, ибо неизвестно сколько времени пройдёт, пока разработчики движка исправят проблему (если исправят вообще).
Заглянул в index.html, генерируемый движком, там стоит строка
Как понял, именно из-за этого отключается масштабирование канваса с игрой.
Так как не знаком с этой темой, наугад потыкал разные значения, например
и др.
Однако к желаемому результату это не привело (но частичные улучшения бывали).
Есть ли какая-нибудь магия, которая приведёт к нормальной работе всего этого?
P.S. Если поможет:
Сам index.html можно глянуть здесь
Скомпилированный проект здесь (как понимаю, с локалки не работает)
P.P.S. По браузерам ориентируюсь на Chrome и Samsung Internet для Android и Safari с Chrome на iOS.
upd: При использовании, например, , я вижу всё изображение, но его вертикальное разрешение ниже, чем должно быть. Например, 960*480 (экран 1920*1080) в ландшафтном режиме. Конечно же, игра в этом случае выглядит ужасно (размытость, нечитаемые мелкие тексты и т.п). В этом же случае при повороте в портретный режим браузер выдаёт разрешение 960*1494. Тогда изображение выглядит отлично, но оно слишком мелкое - занимает чуть больше одной трети экрана (из-за того, что ориентации противоположные). Т.е. мне в первую очередь нужно, чтобы в ландшафтном режиме высота браузера не была меньше высоты канваса игры.
upd2: С помощью Vasiliy Rusin найдено решение, которое решило проблему на Android (при этом браузер должен запрашивать ПК версию сайта, а не мобильную). На iOS по-прежнему отображается в очень низком разрешении.
Ответ
Вам не следует изменять
Эта строка делает ровно то что вам нужно. Вы не учитываете довольно много факторов.
Размер экрана не равен размеру окна браузера. У вас есть интерфейс который отнимает определенное место.
Разрешение экрана не равно размеру экрана (особенно на телефонах). На один виртуальный пиксель приходится несколько пикселей физических. Вы множите получить множитель через window.devicePixelRatio
Размер вашего холста сейчас указан в коде и происходит именно то что вы ожидаете (так думает браузер). А именно, при размере браузерного окна 640 x 232. Размер холста все еще 960 x 640.
У браузеров есть баг (Так думает большинство программистов, но на самом деле они не правы). При изменении ориентации размеры screen.width и screen.height не изменяются. Хотя они и не должны, ведь размер самого экрана остается прежним.
Зная все это мы можем написать следующий код:
var canvas = document.getElementById("canvas");
function canvas_resize(){
canvas.width = 960 * window.devicePixelRatio;
canvas.height = 640 * window.devicePixelRatio;
}
document.addEventListener("DOMContentLoaded", function () {
canvas_resize();
})
window.addEventListener("orientationchange", canvas_resize);
// Скорее всего это уже избыточно но лучше перестраховаться.
window.addEventListener("resize", canvas_resize);
Код довольно прост мы изменяем размеры canvas. При загрузке страницы, и в дальнейшем при каждом перевороте устройства или изменении размера экрана.
Обратите внимание что при размере окна браузера в 960x640
Комментариев нет:
Отправить комментарий