网站在 iPhone 上旋转 180 度

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 度

Website appears 180 degrees rotated on iPhone

html

css

iphone

mobile-safari

ios