2
Aviary는 가까운 미래에 (예 : 모바일 사파리에 적합하지 않음) 반응 형 이미지 편집기를 사용할 계획이 없으므로 누구나 대안을 알고 있습니까?모바일 용 Aviary에 대한 대안 검색
는
A
답변
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;
}
}
0
모바일에 Aviary Web Widget이 정말로 필요합니다. 나는 CSS를 조정했다. 그것은 악몽이었다.
그런 다음 CSS 변형을 사용하여 사진 편집기를 뷰포트 크기로 조정할 수 있음을 알았습니다.
효과가 있습니다. 내가 jQuery 및 actual을 사용하고
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();
: 여기
그것의 핵심입니다. 또한이 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보다 작을 때만 크기 조정을 트리거합니다.
"body"요소를 사용하고 있습니다. "page"의 유일한 것은 사진 편집기이기 때문입니다.
필요에 따라 솔루션을 변경하고 적용 할 수 있습니다.
나는 그것이 효과가 있다고 믿을 수 없다!
0
여기 내 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;
}
}