0

我正在使用 JQuery 视差滑块效果。一切都适合 iPad 上的屏幕，除了当我从横向旋转到纵向时，有大约 120 像素的右边距将我的滑块内容推到右侧。

我试过设置视口标签

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

但这什么也没做。当我直接以纵向进入页面时，这很好。只有当我从横向旋转到纵向时才会添加右边距。纵向到横向适当调整大小。

这是示例 演示

4

2 回答 2

1

A quick, dirty fix would probably be to execute a method to reset the margins when the onorientationchange event is triggered on the body.

So example code would be as follows:

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

Obviously this is not ideal and you would prefer an explanation for why this happens. But I just thought I'd suggest this as a quick fix

于 2012-11-19T15:16:54.817 回答
0

我认为您必须检查方向更改事件并以这种方式设置所需的边距：

$(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-25T11:24:42.157 回答