html – 在iPad和iPhone上缩放时背景图像模糊

>缩放div会拉伸像素而不会添加更多像素.
> background-size：包含;确保您的背景图像完全显示
> div永远不会改变大小.

>因为你可以see here div仍然是200×200像素
>图像大小调整为200×200像素即使它是400×400像素. See here
>几乎在1.中证明了字体仍然很清晰,但javascript认为宽度和高度是200×200像素.

好的,你的修复：

有几种方法.

您可以更改宽度和高度而不是缩放.这不是很漂亮,或者至少你很幸运,如果这个动画不缺乏它的方式扔(在iOS上).

其他东西可能是扩展和检测webkitTranstionEnd

$('div').bind("webkitTransitionEnd",function() {
    $(this).css({
        "-webkit-transform": "scale(1)","width": "400px","height": "400px"
    });
     $(this).unbind("webkitTransitionEnd");
});

请记住取消绑定webkitTransitionEnd事件.否则它的功能调用加倍.

但是它的动画又回来了.所以我们必须将转换保留在一个类中,以便我们可以在需要时添加和删除它：

div {
   -moz-transition-duration: 0ms;
}
div.transition {
    -moz-transition-duration: 200ms;
}

然后在我们必须动画时添加类：

setTimeout(function() {
    $('div').addClass("transition");
    $('div').css({
        backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',webkitTransform: 'scale( 2 )',mozTransform: 'scale( 2 )'
    });
},3000);

并在webkitTransitionEnd中再次删除它

$(this).removeClass('transition');
$(this).css({
   "-webkit-transform": "scale(1)","height": "400px"

});
$(本).unbind( “webkitTransitionEnd”);

什么？？！它不能及时添加/删除课程？！发生什么事.

有时浏览器需要一段时间才能确保添加类.因此,您需要在setTimeout(function(){…},0)中包装css的设置;

setTimeout(function() {
    $('div').addClass("transition");
    setTimeout(function(){
        $('div').css({
            backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',mozTransform: 'scale( 2 )'
        });
    },0);
},3000);

当我们删除课程时：

$(this).removeClass('transition');
setTimeout(function(){
    $(this).css({
        "-webkit-transform": "scale(1)","height": "400px"
    });
     $(this).unbind("webkitTransitionEnd");
},0);

这么长时间,现在的问题是它正在扩大并变得模糊,并且在规模之后它变得非常尖锐.

我们可以做些什么我不知道,但希望它可以帮助你在哪里！

安德烈亚斯