0

JQueryの視差スライダー効果を使用しています。横向きから縦向きに回転するとき、スライダーのコンテンツを右に押し上げる約120ピクセルの右マージンがあることを除いて、すべてがiPadの画面に収まります。

ビューポートタグを設定してみました

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

しかし、これは何もしませんでした。縦向きで直接ページに移動すると問題ありません。右マージンは、横向きから縦向きに回転したときにのみ追加されます。ポートレートからランドスケープへのサイズは適切に変更されます。

これがデモの例です

4

2 に答える 2

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

明らかにこれは理想的ではなく、なぜこれが起こるのかについての説明をお勧めします。しかし、私はこれを簡単な修正として提案すると思いました

于 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 に答える