Question

注意：请先阅读我的评论。

我正在构建一个特定于iPad的网络应用。当点击链接时，我正在使用fancybox覆盖带有内容的窗口 - 尽管我不认为我的问题特定于fancybox。

我正在尝试调出叠加层，然后将其设置为全屏（更改位置和尺寸）。我正在尝试使用css3转换来编写fancybox转换，而不是传统的动画转换，以获得加速。我快到了，但我遇到了一个奇怪的问题...

当我应用变换来更改叠加层的高度时，视口会发生变化 - 它会缩小。无论我使用什么尺寸调整框的高度，视口都会缩小（我制作的框越大，视口缩小的越多）。我正在使用meta标签：。奇怪的是，这不会发生宽度。叠加的宽度很好地转换为全屏宽度，没有视口更改。它只是高度。

有什么想法吗？我确定我错过了一些简单的事情。

以下是一些代码以防万一。注意：我对fancybook lib做了一些修改，所以如果你看到下面看起来奇怪的东西，那就是原因。正如我所说，我不认为这与Fancybox有什么关系，这是我正在努力的移动Safari。

转型：

var F = $.fancybox;

F.transitions.fullScreen = function() {
var cssProps = F._getPosition(true);
cssProps.top = parseInt(cssProps.top, 10) + 'px';
cssProps.opacity = 1;

// set the wrapper to its starting point and show it
F.wrap.css(cssProps).show(); 
$(".fancybox-inner").css({width:cssProps.width, height:cssProps.height});

window.setTimeout(function(){
    var leftPos = F.wrap.offset().left;
    var topPos = F.wrap.offset().top;
    $(".fancybox-wrap").css({"-webkit-transform": "translate3d(-"+leftPos+"px,-"+topPos+"px,0)", width: "880px", height: "500px" });

},200)

};

CSS：

.fancybox-wrap{
-webkit-transition:all 1s ease-in;  
-webkit-transform: translate3d(0,0,0);
-webkit-transition-duration: 1000ms;  
}

干杯

-webkit-transform height正在改变移动游猎的视口

0 个答案: