Question

我有一个非常令人困惑的问题。我开发了一个网站，可以在shooja.com上访问。它使用zepto而不是jQuery，以及GSAP用于动画（虽然我不认为这些与问题有关）。代码未压缩，因此可以通过Web检查员完全检查。它在Firefox，Chrome，Safari桌面甚至IE上都表现得非常完美。在Android浏览器上也可以。但是在iPhone上（我在5和5s上检查过它），它显示180度旋转而不是按比例缩小。我可以想象缩放为元标记的原因，但旋转没有任何意义。任何帮助表示赞赏。

function addEvent(evnt, elem, func) {
   if (elem.addEventListener)  // W3C DOM
      elem.addEventListener(evnt,func,false);
   else if (elem.attachEvent) { // IE DOM
      elem.attachEvent("on"+evnt, func);
   }
   else { // No much to do
      elem[evnt] = func;
   }
}

function onResize() {
      var sc = Math.max(
        1024 / (window.outerWidth - 10),    
        1024 / (window.outerHeight - 50)
      );

      sc = Math.floor(sc/.1)*.1;
      TweenLite.to(dd("qalpaq"), .001, {scale:1/sc, x:-sc*10, y:0, z:0});
}

function init() 
{
    addEvent("resize", window, onResize);

    onResize();
    updateContents();
    TweenLite.to(dd("loading"), .0001, {opacity:0, zIndex:0});
}

Answer 1

问题是你的qalpaq元素正在获得负变换矩阵值。这是代码的这一部分的结果：

function onResize() {
      var sc = Math.max(
        1024 / (window.outerWidth - 10),    
        1024 / (window.outerHeight - 50)
      );

      sc = Math.floor(sc/.1)*.1;
      TweenLite.to(dd("qalpaq"), .001, {scale:1/sc, x:-sc*10, y:0, z:0});
}

显然，在移动版Safari上，window.outerWidth和window.outerHeight都是0，使sc的值更高-102.4和-20.48其中是负面的。

也许你想使用window.innerWidth和window.innerHeight，这两者在iOS Safari中都是正确的，通常更有用。

网站在iPhone上旋转180度

1 个答案: