iPhoneで180度回転したウェブサイトが表示される

Question

私はかなり混乱する問題があります。私はshooja.comでアクセスできるウェブサイトを開発しました。 jQueryの代わりにzepto、アニメーションのためのGSAPを使用しています（私はこれらが問題に関係しているとは思わないが）。コードは圧縮されていないので、Webインスペクタで完全にチェックすることができます。 Firefox、Chrome、デスクトップ上のSafari、さらにはIEでも完璧に表示されます。アンドロイドブラウザでもOKです。しかし、iPhone（私は5と5でそれをチェックしている）は、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要素が負の変換マトリックス値を取得していることです。 sc負のどちらも-102.4と-20.48、より大きな値を作り、両方0ある

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}); 
} 

モバイルサファリに明らか

、window.outerWidthとwindow.outerHeight：これは、コードのこの部分の結果です。

おそらくwindow.innerWidthとwindow.innerHeightを使用したいと思いますが、両方ともiOS Safariで正しくあり、一般的にはより便利です。