4

iPod および iPhone 4 の Safari でのビューポートの問題について調査を行っていますが、この問題に関する回答が見つかりません。縦向きから横向きになる問題に関するスレッドがいくつかありますが、横向きから縦向きにはなりません。問題は次のとおりです。

縦から横に移動するときに通常のズームの問題があったため、次のタグを追加しました。

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

そのため、その問題は修正されました。今、ポートレート モードに戻ると、作成したページが引き伸ばされ、右マージンが追加されてレンダリングされます。これによりページが広くなるため、ページの元の位置を取得するには左にスイープする必要があります (新しい「右マージン」が保持されると考えられます)。

すでにこれに答えている人がいたら申し訳ありませんが、この問題に対する答えが見つからなかったようです。

追加情報が必要な場合はお知らせください。それが私の最初の質問であることを覚えておいてください:/

ありがとうございました！

編集: iOS 6 を実行していますが、この問題が発生しています。iOS 5.1.1 でページを実行すると正しく表示されるため、以前に修正されたビューポートのバグの新しいバージョンである可能性があります。

4

3 に答える 3

3

これをCSSまたはスタイルブロックに追加したいと思います。（この投稿にありました）

  html {
      -webkit-text-size-adjust: none; /* Never autoresize text */
  }
于 2012-10-02T19:29:57.610 に答える
2

jqueryとcssを介してこれの回避策を見つけました。それがどれほど効果的かはわかりませんが、私のニーズに合ったオプションです. 基本的に、#orient id タグを body タグに追加してから、問題が発生しているデバイスの最大幅を持つ .ios6-mobile クラスを作成します。私の例では、ios6 を実行している iphone サイズのため、最大幅は 320px でした。ここにjqueryコードがあります。

jQuery

window.addEventListener("orientationchange", function() {
  if(window.orientation == 0){
      $("#orient").addClass("io6-mobile");
  } else if (window.orientation !== 0){
      $("#orient").removeClass("io6-mobile");
  }
}, false);

CSS

#orient { /* Don't need any code. Just a helpful ID to pass to jQuery */ }
.ios6-mobile { max-width:320px /* change the width to whatever size your device is */; overflow:hidden; }

これが何らかの形で役立つことを願っています!

于 2013-07-25T19:02:18.470 に答える
1

これは私が同じ問題を解決するのに役立ちました

@media (max-width:640px) and (orientation: landscape) {
    body {-webkit-text-size-adjust: 100%;}
}

そしてRetinaディスプレイのバグについて

@media (max-width:640px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:2) {
    body {-webkit-text-size-adjust: 70%;}
}
于 2012-10-23T08:42:46.483 に答える