HTML5 JS Games, которая работает на любом разрешении

Question

Мы собираемся создать набор образовательных материалов, таких как уроки, упражнения и игры для детей, для использования на OLPC xo. Мы собираемся использовать HTML5 и JavaScript. Ранее они использовали Flash.

XO имеет разрешение 900x1200. Контент, созданный в основном для xo, также будет использоваться в Интернете. Контент, созданный ранее во Flash, хорошо масштабируется в любом разрешении. Что я должен сделать, чтобы иметь такое же поведение в содержимом HTML5 + JS. до сих пор лишь немногие образцы контента использовали фиксированное разрешение 900x1200 с абсолютным позиционированием. Они отлично смотрятся на XO, но не выглядят великолепно на разных разрешениях настольных компьютеров.

Любая помощь / руководство будет высоко ценится.

Answer 1

Вместо фиксированного разрешения динамически вычисляйте размер окна и инициализируйте другие параметры.'window.innerHeight' и 'window.innerWidth' проверит размер, доступный в окне браузера.Или используйте «screen.height» и «screen.width» для динамического расчета разрешения экрана.Дайте мне знать, если вам нужны разъяснения.

Answer 2

Том из Scirra, мы команда из двух человек, которая делает игровой движок HTML5 под названием Construct 2 , на который вы, возможно, захотите посмотреть, как бы это ни звучало на вашей улице.

Construct 2 может работать с экранами разных размеров, что крайне важно для развертывания игр и приложений HTML5 на мобильных устройствах с различными разрешениями.Ознакомьтесь с нашим руководством по управлению этим в Construct 2:

http://www.scirra.com/tutorials/73/supporting-multiple-screen-sizes

Answer 3

Вы можете легко масштабировать веб-контент, используя transform: scale(scaleRatio); свойство CSS.Хотя это является частью стандарта CSS3, большинство браузеров теперь используют специальные префиксы для этого свойства, такие как: -moz, -webkit, -ms, -o.

Подробнее о transform можно прочитать на1005 * MDN .