2

だから、あなたはiPadが回転するときに持っている小さな問題に精通していると確信しています。ユーザーが回転すると、iPadは初期スケールを維持したいので、再レンダリングするとズームインしてしまいます。

多くの人がこれでそれを改善することを提案しました

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

これは、ユーザーがWebサイトをズームインおよびズームアウトできないことを除いて、うまく機能します。ビューポート情報を入れ替えてリセットする方向の変化を検出する方法があるかどうか知りたいです。

例えば

ロード時に私のビューポートは

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

次に、理論的には、次のようなことを行うjsがいくつかあります。

  window.onorientationchange = function() {
    $("#view-port").attr("content", "width=device-width, maximum-scale = 1.0, initial-    scale= 1.0");
    setTimeout("resetMetaTag()", 500);
 };

  var resetMetaTag = function() {
    $("#view-port").attr("content", "width=device-width, initial-scale= 1.0");
    console.log($("#view-port").attr("content"));
  };

方向付けが行われる前にビューポートを交換するのではなく、非同期で行うため、これは機能しません。画面が再レンダリングされる前に、ある種の「回転しようとしている」ことを検出したり、関数を挿入したりする方法はありますか？

それは大いに役立つでしょう。

4

2 に答える 2

1

ここで回答をいくつか組み合わせて、ユーザーがズームインおよびズームアウトuser-scalable=1してビューポートプロパティに追加して削除maximum-scale=1.0したり、より高い値に変更したりできるようにします。maximum-scale=1.0つまり、ユーザーは現在のレベルを超えて画面を拡大縮小することはできません。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />

向きの変化を検出する場合は、イベントリスナーをウィンドウにアタッチします。

window.addEventListener('orientationchange', updateOrientation, false);

updateOrientation関数では、デバイスがどの方向にあるかを検出し、それに応じてビューポート属性をリセットできます。

function updateOrientation() {
  if (!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
    return;
  }

  var viewport = document.querySelector("meta[name=viewport]");

  switch (window.orientation) {
    case 0: //portrait
      //set the viewport attributes to whatever you want!
      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
      break;
    case 90: case -90: //landscape
      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
      break;
    default:
      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
      break;
  }
}
于 2012-01-10T17:07:47.687 に答える
1

これが私のために働くことを試してください：

<meta name="viewport" content="width=device-height, minimum-scale=1, user-scalable=1;">

これで、iPadを回転させると、適切なスケールが検出されます。

于 2013-03-01T01:04:16.593 に答える