Я пытаюсь создать HTML5-игру, которую я хотел бы использовать в современных браузерах для настольных компьютеров, а также как можно больше смартфонов.На данный момент это означает iPhone 3/4 и пару Android-ов ...
Эта игра в основном представляет собой холст, который должен занимать весь экран, который я вручную изменяю в размерах (обрабатывая событие onResize) следующим образом: (это то, что я нашел лучше всего, методом проб и ошибок, если у вас есть какие-либо советы, я бы хотел их услышать!)
- Для настольных браузеров: canvas.width / height = window.innerWidth / Height
- Для Android: то же самое, но я добавляю (outerHeight - innerHeight) к высоте холста и прокручиваю вниз, чтобы компенсировать верхнюю полосу.
- Для iPhone 3: то жечто касается Android, но вместо этого я добавляю жестко закодированные 60 пикселей.
Во всех случаях у меня есть следующие метатеги:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Теперь моя большая проблема - iPhone 4... Настройка iPhone 3, о которой я упоминал выше, работает отлично, но она отображается в низком разрешении и выглядит как дерьмо.Я не смог успешно показать его в полном разрешении Retina, без прокрутки и (это ключ) ответа на вращение телефона.
Ближайшим, что я получил, была настройка
<meta name="viewport" content="width=640, initial-scale=0.5 (etc)" />
И установив холст к окну внешний ширина и высота вместо внутреннего.Это выглядит великолепно вначале;однако, как только я повернул телефон, он все испортил, и если я повернул его обратно в портрет, он даже больше облажался.
Удивительно, но обновление не может исправить это, мне нужноизмените «начальный масштаб» в окне просмотра мета на 1, обновите, а затем вернитесь к 0,5 и обновите снова.
Есть ли способ сделать то, что я пытаюсь сделать?
Большое спасибо!
Даниэль