2

Aviary は近い将来、レスポンシブな画像エディターを用意する予定がないので (たとえば、モバイル サファリには適していません)、代替案を知っている人はいますか?

これは、レスポンシブは近い将来ではないと彼らが言うところです。

http://support.aviary.com/forums/191584-developer-feedback/suggestions/3718022-fully-responsive-web-editor-for-mobile-sites

4

3 に答える 3

1

次の 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;
}

}
于 2014-10-24T11:44:31.750 に答える
0

モバイルで 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とactualを使用しています。また、この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 フォト エディターが収まる最大幅は 757px です。

そのため、JavaScript では、幅が 757px 未満の場合にのみスケーリングをトリガーします。

「ページ」にあるのはフォトエディターだけなので、「ボディ」要素を使用しています。

ニーズに合わせてソリューションを変更および適応させることができます。

私はそれがうまくいったなんて信じられない！

于 2014-12-05T04:41:35.013 に答える