Cпособ поддержки нескольких форматов экрана

Поддержка нескольких форматов экрана в HTML5

Одним из способов поддержки нескольких форматов экрана, мобильные, настольные, планшеты, это написать отдельный документ HTML для каждого типа устройств, а также использовать пользовательские CSS с учетом каждого размера экрана. 

Вы можете также использовать гибкий движок шаблонов для построения различных HTML документов, но это почти всегда сложно, и приводит к избыточности CSS.
Демо

Поддержка нескольких форматов экрана в HTML5

NonStop Games разработал простую модель, которая уменьшает код CSS. Во всех мультиплатформенных играх, они используют глобальные классы .mobile, .tablet или .desktop class. Это похоже на CSS media queries , но при этом CSS становится гораздо проще в обслуживании.

Этот метод может быть использован со статическим и динамическим страницами HTML, но лучше всего работает в играх, где один документ загружается один раз и обычно содержит все возможные режимы просмотра игры и диалоги.

Например, предположим, вы хотите создать простой диалог, который должен иметь различные размеры и положение, в зависимости от платформы отображения.

Одним из решений было бы сделать три различных диалога и применять различные CSS для каждого. Это делает код труднее в обслуживании, замедляет селектор, а также увеличивает нагрузку и время обработки.



<body>

  <div class="dialog-desktop">
    ...
</div>

  <div class="dialog-tablet">
    ...
  </div>

  <div class="dialog-mobile">
    ...
  </div>

</body>


Так что нужно делать, нужно добавить для устройства класс  (например для desktop) в теге body во время загрузки. Это уменьшит документ:



<body class="desktop">

  <div class="dialog">
    ...
  </div>

</body>


Класс может быть установлен либо на backend движок шаблона или путем простого подключения JavaScript.

Далее, мы определяем общий стиль для диалога, он является общим для всей платформы.



.dialog
    {
      position:absolute;
      left:50%;
      top:50%;
    }


Устройство конкретных стилей (в том же файле CSS) определяется следующим образом:



.desktop .dialog ,
.tablet .dialog
    {
      width:480px;
      height:300px;
      margin-left:-240px;
      margin-top:-240px;
    }
.mobile
    {
      width:300px;
      height:200px;
      margin-left:-150px;
      margin-top:-100px;
    }


Это ощутимо сокращает время, так как корректировки для конкретного устройства можно быстро сделать и без него, влияющие на любой текущий макет или функциональность. И код игры ничего об этом не знает.

Обратите внимание, что мы сохраняем все стили игры в один файл, а код HTML и CSS зачастую настолько тесно связаны, и разделение CSS для разных модулей (макет, тема, шаблон) обслуживание становится катастрофично в быстром движущемся цикле разработки.

Эта модель также может быть сделана в стилях для книжного и альбомного варианта, но наш опыт показывает, что не стоит пытаться реализовывать это в мобильных играх.

Если код структурирован как этот, с ним намного легче создавать автономные тестовые страницы, которые можно использовать для настройки игры просмотров как статические HTML страницы без перезагрузки всей игры после каждого изменения. Это сильно помогает для мобильных устройств, которые не имеют онлайн отладчика CSS, как Firebug.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


7 + = 12

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>