旋轉到橫向時的左邊距

我正在使用JQuery視差滑塊效果。除了從橫向旋轉到縱向時，所有東西都適合iPad上的屏幕，大約有120px的右邊距，這會將滑塊內容向右推。旋轉到橫向時的左邊距

我已經嘗試設置視口標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

但什麼也沒做。當我直接以縱向瀏覽頁面時，它很好。只有當我從風景旋轉到肖像時，纔會添加右邊距。適合景觀的縱向調整大小。

我這裏是 demo

來源

2012-11-14 Alex Borsody

不知道這將有助於嘗試添加「user-scalable = no」否視口標籤？ –

快速，骯髒的修復很可能是執行方法時被觸發的body的onorientationchange事件重置利潤率。

因此示例代碼將如下所示：

<body onorientationchange= "fixMargins()"> 

.... 

function fixMargins() { 
    var orientation = window.orientation; 
    switch (orientation) { 
     case 0: // portrait 
      $('div').css('margin-right', '40px'); 
      break; 
     case 90: // landscape left 
      $('div').css('margin-right', '40px'); 
      break; 
     case -90: //landscape right 
      $('div').css('margin-right', '40px'); 
      break; 
     case 180: // portrait upside down 
      $('div').css('margin-right', '40px'); 
      break; 
    } 
}

顯然，這不是理想的，你會更喜歡，爲什麼出現這種情況的解釋。但我只是想我會建議這是一個速戰速決

來源

2012-11-19 15:16:54 SlashmanX

爲什麼將margin設置爲40px？這種情況也只發生在從橫向到縱向時，在回到橫向時它是固定的 –

40px只是我挑選的一個隨機數。在你的情況下，你會用任何看起來不錯的東西代替它。如果只是從風景走向肖像，那麼就把代碼留在案例0：'和案例180：' – SlashmanX

我不得不這樣做，而不是你的解決方案http://stackoverflow.com/questions/ 5284878/how-do-i-correct-detect-orientation-change-using-javascript-and-phonegap-in-io –

我認爲你必須檢查的方向變化事件，並設置所需的利潤率高達你喜歡這種方式：

$(window).bind('orientationchange', function(e){ 

    if(e.orientation){ 

     if(e.orientation == 'portrait'){ 

       //do something 
       //about your margins for portrait 

     } 

     else if(e.orientation == 'landscape') { 

       //do something 
       //about your margins for landscape 

     } 
    } 

});

來源

2012-11-25 11:24:42 Jai

旋轉到橫向時的左邊距

回答

相關問題