1

メタ タグ "viewport" を使用すると、Web サイトの初期スケールを設定できますが、ユーザーがデバイスの向きを反転すると、これが奇妙になることがあります。

たとえば、縮尺を 800x380 に設定し、ユーザーが Web サイトをポートレート モードで開いた場合、この縮尺は明らかに間違っており、ユーザーが 90 度回転すると、Web サイトの幅は 1650 に近くなります。

デバイスが最初から横向きの場合は 800x380、縦向きの場合は 380x800 になるようにビューポートを設定するにはどうすればよいですか?

4

3 に答える 3

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!
      //For Ex : viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
      break;
    case 90: case -90: //landscape
      //set the viewport attributes to whatever you want!
      break;
    default:
      //set the viewport attributes to whatever you want!
      break;
  }
}
于 2012-04-20T11:24:00.347 に答える
0

このようにアプリケーションの「スケール」を設定するべきではありません。さまざまな画面密度に対応できる単位を使用して、アプリを独立してスケーリングできるようにする必要があります。「dp」を単位として使用し、レイアウトを配置して、縮尺に関係なく意味を成すようにしてください。

Android でレイアウトを構築する必要がある方法は、私にとってプラットフォームでの開発の最も困難な側面の 1 つです。申し訳ありませんが、これは技術的には答えではありませんが、Android は非常に多くのデバイス (タブレット、電話、その他のデバイス) で実行されるため、密度に依存しない単位と、解像度のスケーリング (高密度、中密度、およびドローアブル内の低密度フォルダー。)

ただし、起動時 (onCreate() または onResume()) に向きを検出し、リソースから適切なレイアウトを読み込むことができます。ただし、すべてのレイアウトの 2 つのコピーを保持する必要があります (1 つは水平方向用、もう 1 つは垂直方向用です)。また、レイアウトの変更をトリガーするように方向の変更を構成する必要があります。

于 2012-04-17T21:58:26.670 に答える
0

さまざまな画面サイズと向きにメディア クエリを使用します。

    <html>
      <head>
        <meta name="viewport" content="width=device-width; height=device-height; user-scalable=no; initial-scale=1; />
        <link rel="stylesheet" href="main_portrait.css" type="text/css" media="all and (orientation:portrait)">
        <link rel="stylesheet" href="main_landscape.css" type="text/css" media="screen and (max-width:500px) and (orientation:landscape)">
        <link rel="stylesheet" href="main_landscape_big.css" type="text/css" media="screen and (min-width: 501px) and (orientation:landscape)">
        <script type="text/javascript" charset="utf-8" src="cordova-1.6.0.js"></script>
        <script type="text/javascript" charset="utf-8" src="main.js"></script>
      </head>
      <body onload="init();"></body>
    </html>

最初のスタイルシート リンクは、ポートレート モードのすべてのデバイスに適用されます。
2 番目のスタイルシートは、向きが横向きの場合に最大幅 500 ピクセルのデバイスに
適用され、最後のスタイルシートは、幅が 500 ピクセルを超え、向きが横向きのデバイスに適用されます。

必要な組み合わせごとにさらにスタイルシートを追加できます。

メディア クエリのドキュメントは次のとおりです: W3C メディア クエリ
と優れたチュートリアル: CSS3 メディア クエリを使用して Web サイトのモバイル バージョンを作成する方法

于 2012-04-19T07:17:54.647 に答える