Объявление

Свернуть
Пока нет объявлений.

Как открытку html5 canvas (Animate CC) масштабировать на 100% экрана в смартфоне

Свернуть
X
 
  • Фильтр
  • Время
  • Показать
Очистить всё
новые сообщения

  • Как открытку html5 canvas (Animate CC) масштабировать на 100% экрана в смартфоне

    Здравствуйте! Сделал анимацию html5 canvas на Animate CC размером 660х444 пкс. Столкнулся с проблемой, в смартaфоне Samsung в книжном положении анимация сделана на на всю ширину экрана. Если перевернуть смарфон в книжное положении, анимация масштабируется по всей высоте. В настройках Animate CC можно сделать адаптивный размер по всему экрану, но на всю ширину или высоту анимация делается и на компьютере в браузере, а этого не нужно.

    Нужно, чтобы в браузере отображался фиксированный размер canvas, а в смартофоне 100% от всей ширины или высоты в зависимости от положения смартфона. Пробовал стиль, который делал для видео-ролика mp4 и в нем все прекрасно работает, но canvas на него не реагирует.

    Код:
    @media only screen and (min-width : 660px) {
    #animation_container, #canvas, #dom_overlay_container {
      width:660px;
      height:444px;
      position:absolute;
      left:50%;
      top:50%;
      margin:-222px 0 0 -330px;
    }
    }
    
    @media only screen and (min-device-height : 240px) and (max-device-height : 444px) {
    #animation_container, #canvas, #dom_overlay_container {
      width: auto;
      height: 100%;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }
    }
    
    @media only screen and (min-device-width : 240px) and (max-device-width : 660px) {
    #animation_container, #canvas, #dom_overlay_container {
      width: 100%;
      height: auto;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }

  • #2
    Вы стили пишете в начале документа?
    Если так, то скорее всего скрипт, который подгружает js файл вашей анимации перекрывает эти стили.
    Вообще за растяжение канваса отвечает вот этот код:
    //Code to support hidpi screens and responsive scaling.
    AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);
    AdobeAn.compositionLoaded(lib.properties.id);
    fnStartAnimation();
    И, видимо, плевать он хотел на ваши попытки растянуть его CSS'ом.
    В качестве быстрого костыля могу предложить загружать два одинаковых канваса, но с разными параметрами, и в зависимости от размера экрана показывать какой-то один.

    Комментарий


    • #3
      Можно закоментить эту функцию

      Код:
      //AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);
      и в HTML добавить это -
      Код:
      <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
      потом в стиль контейнера поставить размеры 100%

      Код:
      <div id="animation_container" class="fi" style="overflow:hidden; position:absolute; background-color:rgba(0, 0, 0, 0);	width:100%; height:100%;">


      Должно сработать

      Комментарий

      Обработка...
      X