Адаптивная альтернатива Aviary для мобильных устройств

Вы можете использовать следующий css, чтобы сделать всплывающее окно редактора вольеров отзывчивым. Это единственное решение:

@media all and (max-width: 640px) {
html {
    height: 100%;
}

body {
    min-height: 100%;
    position: relative;
}

.avpw_is_fullscreen #avpw_controls, #avpw_holder #avpw_controls, #avpw_holder .avpw_is_fullscreen #avpw_controls {
    position: absolute;
    left: 5px;
    right: 5px;
    min-width: 300px;

    -webkit-sizing: border-box;
    -moz-sizing: border-box;
    box-sizing: border-box;
}

#avpw_holder #avpw_tool_content_wrapper {
    position: relative;

    padding-bottom: 56px;

}

#avpw_holder #avpw_tool_main_container {
    position: relative;
}

#avpw_holder #avpw_tool_options_container {
    position: relative;
}

#avpw_holder #avpw_tool_container {
    left: 0;
    right: 0;
    min-width: 300px;
}

#avpw_holder .avpw_prev, #avpw_holder .avpw_next {

}

#avpw_holder .avpw_tool_pager .avpw_clip {
    right: 48px;
}

#avpw_holder .avpw_scroll_strip {
}

#avpw_holder .avpw_scroll_strip .avpw_scroll_page {
    /* max-width:200px; */
    /* width: 300px !important; */
}

#avpw_holder #avpw_rghtArrow {
    right: 0;
}

#avpw_holder #avpw_canvas_embed {
    -webkit-sizing: border-box;
    -moz-sizing: border-box;
    box-sizing: border-box;
    top: 188px;

}

#avpw_holder #avpw_zoom_container {
    width: auto;
    min-width: 42px;
    left: 5px;
    /* right: 5px; */
    background: rgba(51, 51, 51, 0.59);
}

#avpw_holder #avpw_canvas_element, #avpw_holder #avpw_canvas_element.avpw_position_by_transform {
    -webkit-sizing: border-box;
    -moz-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100% !important;

    -webkit-transform: none !important;
    -moz-transform: none !important;
    transform: none !important;

}

#avpw_holder .avpw_mode_action {
    position: relative;
    height: 55px;
    width: 100%;
    top: 100%;
    /* background: #303740; */
}

#avpw_holder .avpw_mode_action_left,
#avpw_holder .avpw_mode_action_left + .avpw_mode_action_right {
    width: 50%;
}

#avpw_holder .avpw_mode_action_left {
    float: left;
}

#avpw_holder .avpw_mode_action_right {
    float: right;
}

.avpw_mode_action_left:after, .avpw_mode_action_right:before, .avpw_tool_pager .avpw_scroll_rule {
    height: auto !important;

    top: 0 !important;
    bottom: 0 !important;
}

#avpw_holder .avpw_mode_action .avpw_button {
    /* position: relative; */

}

#avpw_holder .avpw_back_button {
    float: left;
}

}

Мне очень нужен Aviary Web Widget на мобильном телефоне. Я пробовал настройку CSS. Это был кошмар.

Затем я понял, что могу использовать преобразование CSS, масштабируя фоторедактор до размера области просмотра.

Это сработало!

Вот его суть:

function adjustSize()
{
  // condition to begin using scale is media query below

  if (!actual.mq('(max-width: 757px)'))
  {
      return $('body').css('transform', 'translate(0px, 0px) scale(1)');
  }

  // scale = actual width in pixels divided by 757 (minimum photo editor width)
  var scale = actual('width', 'px') / 757;

  // left side positioning
  var left = (376 * scale * scale) + (-376 * scale);

  return $('body').css('transform', 'translate(' + left + 'px, 0px) scale(' + scale + ')');
}

$(window).resize(adjustSize);

adjustSize();

Я использую jQuery и фактический. А также этот CSS:

@media all and (max-width: 941px) {

.avpw_is_fullscreen #avpw_controls, #avpw_holder #avpw_controls {
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

}

С приведенным выше CSS максимальная ширина, в которую помещается фоторедактор Aviary, составляет 757 пикселей.

Таким образом, в JavaScript мы запускаем масштабирование только тогда, когда ширина меньше 757 пикселей.

Я использую элемент «тело», потому что единственное, что есть на «странице», — это фоторедактор.

Вы можете изменить и адаптировать решение под свои нужды.

Я не могу поверить, что это сработало!

Вот мой CSS. Не супер-красиво, но это начало. Комментарии/предложения приветствуются!

span.aviary-feather {
    background: #ff0000 none repeat scroll 0 0;
    color: #ffffff;
    font-size: 16px !important;
    height: auto !important;
    opacity: 1 !important;
    padding: 5px 40px !important;
    width: auto !important;
}
span.aviary-feather::after {
    content: "edit";
}
#avpw_zoom_container {
    display: none !important;
}
#avpw_powered_branding {
    display: none;
}

#avpw_controlpanel_crop, 
#avpw_controlpanel_orientation .avpw_inset_group:nth-child(3), #avpw_controlpanel_orientation .avpw_label:nth-child(6) {
    display: none !important;
}

.avpw_inner-center {
    right: 0 !important;
}
.avpw_tool_cutout_centered_drawing {
    padding-left: 65px;
    width: 100%;
}
.avpw_colorsplash_eraser {
    width: 45px !important;
}
.avpw_inset_color_widget,
#avpw_controlpanel_drawing .avpw_inset_button_label {
    display: none;
}




@media all and (max-width: 941px) {
#avpw_holder {
    left: 0;
    position: fixed;
    top: 150px;
    transform: translate(0px, 0px) scale(1);
    z-index: 1;
}
.avpw_is_fullscreen #avpw_controls, #avpw_holder #avpw_controls {
    bottom: 5px;
    min-height: 600px;
    right: 5px;
    top: 5px;
    transform: translate(0px, 0px) scale(1);
}
.avpw_main_close {
    left: 0 !important;
}
/*#avpw_tool_main_container, #avpw_tool_options_container {
    width: 300px !important;
}*/
.avpw_tool_pager .avpw_clip {
    left: 100px !important;
}
.avpw_mode_action_right {
    float: left !important;
    height: auto !important;
    position: relative !important;
}
.avpw_mode_action.avpw_mode_action_right .avpw_button {
    left: 0;
    top: 25px;
}
.avpw_mode_action.avpw_mode_action_left {
    left: -12px;
    top: 12px;
}

#avpw_canvas_element, #avpw_temp_loading_image, #avpw_canvas_overlay,
#avpw_canvas_controls_layer {
    /*transform-origin: 125px 0 0 !important;
    transform: translate(0px, 0px) scale(0.406667) !important;*/
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
    /*transform: translate(50px, 86px) scale(1) !important;*/
    transform: translate(0, 86px) scale(1) !important;
    width: auto !important;
}



.avpw_canvas_spinner {
    left: 75px !important;
    top: 115px !important;
}

}