J'ai vraiment besoin de Widget Aviary Web sur mobile. J'ai essayé de peaufiner CSS. C'était un cauchemar. Ensuite, j'ai réalisé que je pouvais utiliser la transformation CSS, en ajustant l'éditeur de photos à la taille de la fenêtre.
Cela a fonctionné!
est le cœur de celui-ci ici:
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();
J'utilise jQuery et actual. Et aussi ce CSS:
@media all and (max-width: 941px) {
.avpw_is_fullscreen #avpw_controls, #avpw_holder #avpw_controls {
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
}
}
Avec le CSS ci-dessus, la largeur maximale de l'éditeur de photos Aviary est de 757px. Donc, dans le JavaScript, nous ne déclenchons la mise à l'échelle que lorsque la largeur est inférieure à 757px. J'utilise l'élément "body", car la seule chose dans la "page" est l'éditeur de photo.
Vous pouvez modifier et adapter la solution à vos besoins.
Je ne peux pas croire que ça a marché!