Question

我正在使用JQuery视差滑块效果。一切都适合iPad上的屏幕，除非我从横向旋转到肖像时，右边距约为120px，将我的滑块内容推到右边。

我尝试过设置视口标记

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

但这没有做任何事。当我直接以肖像方式进入页面时，它很好。仅当我从横向旋转到纵向时，才会添加右边距。横向纵向调整适当。

这是一个例子 demo

Answer 1

快速，脏的修复可能是在onorientationchange上触发body事件时执行重置边距的方法。

示例代码如下：

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

显然这并不理想，你更愿意解释为什么会发生这种情况。但我只是认为我建议将其作为快速解决方案

Answer 2

我认为您必须检查方向更改事件并按照您喜欢的方式设置所需的边距：

$(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

      }
   }

});

旋转到横向时左边距

2 个答案: