19

ページのビューポート幅を横向きで 950px、縦向きで 630px にする必要があります。残念ながら、これらのピクセル幅には柔軟性がありません。

CSS メディア クエリを使用して、向きに基づいて DOM コンテンツの幅を調整しています。

方向の変更時にビューポートのサイズを変更するために、JS で方向変更イベントをリッスンしています。

最初のページ読み込み (縦または横) では、すべてが適切に表示されます。

ただし、向きを変更すると、Mobile Safari はビューポートを画面に合わせずに、以前のスケール設定を保持します。1 回か 2 回ダブルタップすると、まっすぐになります。しかし、私はそれを自動にする必要があります。

以下にソースを添付し、デモURLにアップロードしました。

以下は、横向きから縦向き、縦向きから横向きに変更した後のスクリーン キャプチャです。

Safari でビューポートの幅を画面の幅に自動的に設定するにはどうすればよいですか? それとも、私はこれについてすべて間違っていますか？

ビューポートでさまざまなスケール設定を変更しても効果がありませんでした。maximum-scale=1.0orを設定するinitial-scale=1.0と、 my が上書きされ、(iPad 2 では 1024 または 768 に) 設定されているように見え、デッド マージン スペースが残りますwidth。設定は何もしないようです。widthdevice-widthminimum-scale=1.0

横向きから縦向きへ

ポートレートからランドスケープへ

<!DOCTYPE html>
<html>
    <head>
      <title>iPad orientation</title>

      <meta name="viewport" content="user-scalable=yes">

      <script src="jquery-1.4.2.min.js" type="text/javascript"></script>

      <script type="text/javascript" charset="utf-8">;
        /**
        * update viewport width on orientation change
        */
        function adapt_to_orientation() {
          // determine new screen_width
          var screen_width;
          if (window.orientation == 0 || window.orientation == 180) {
            // portrait
            screen_width = 630;
          } else if (window.orientation == 90 || window.orientation == -90) {
            // landscape
            screen_width = 950;
          }

          // resize meta viewport
          $('meta[name=viewport]').attr('content', 'width='+screen_width);
        }

        $(document).ready(function() {

          // bind to handler
          $('body').bind('orientationchange', adapt_to_orientation);

          // call now
          adapt_to_orientation();
        });

      </script>
      <style type="text/css" media="screen">
        body {
          margin: 0;
        }
        #block {
          background-color: #333;
          color: #fff;
          font-size: 128px;

          /* landscape */
          width: 950px;
        }
        #block .right {
          float: right
        }
        @media only screen and (orientation:portrait) {
          #block {
            width: 630px;
          }
        }
      </style>
    </head>
    <body>
      <div id="block">
        <div class="right">&rarr;</div>
        <div class="left">&larr;</div>
      </div>
    </body>
</html>
4

4 に答える 4

10

私はこの問題を抱えていたので、それを修正するためにいくつかの JavaScript を書きました。ここのGithubに置きました：

https://github.com/incompl/ios-reorient

便宜上、コードを次に示します。

window.document.addEventListener('orientationchange', function() {
  var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
  var viewportmeta = document.querySelector('meta[name="viewport"]');
  if (iOS && viewportmeta) {
    if (viewportmeta.content.match(/width=device-width/)) {
      viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=1');
    }
    viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=' + window.innerWidth);
  }
  // If you want to hide the address bar on orientation change, uncomment the next line
  // window.scrollTo(0, 0);
}, false);
于 2013-08-15T19:41:01.130 に答える
8

*-scaleOK、結局のところ、答えは属性にありました。

maximum-scaleと の両方をminimum-scale同じ値に設定することで、特定のスケールを強制できます。ただし、メタ タグを に設定して、ユーザー スケーリングを犠牲にする必要があります<meta name='viewport' content='user-scalable=no' />。

設定はデバイスの画面サイズに関連していることに注意してください*-scale。これはデバイスごとに異なります。幸いなことにscreen、JS のオブジェクトでこれらを調べることができます。

したがって、コンテンツの幅が 980 未満の場合、強制スケールはscreen_dimension / content_width.

上記の JS のこの更新バージョンにより、向きの変更がスムーズに機能するようになりました。iPhone 4 および iPad 2 でテスト済み。

    function adapt_to_orientation() {
      var content_width, screen_dimension;

      if (window.orientation == 0 || window.orientation == 180) {
        // portrait
        content_width = 630;
        screen_dimension = screen.width * 0.98; // fudge factor was necessary in my case
      } else if (window.orientation == 90 || window.orientation == -90) {
        // landscape
        content_width = 950;
        screen_dimension = screen.height;
      }

      var viewport_scale = screen_dimension / content_width;

      // resize viewport
      $('meta[name=viewport]').attr('content',
        'width=' + content_width + ',' +
        'minimum-scale=' + viewport_scale + ', maximum-scale=' + viewport_scale);
    }
于 2012-08-24T17:56:15.163 に答える
3

この投稿の知恵を使用して、スクリプトのコンテナの幅と高さを取得するだけです（ウィンドウの幅と高さ）... https://stackoverflow.com/a/9049670/818732

このビューポートを使用して:target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=noアンドロイドと ios で私の問題を解決しました。target-densitydpi は、Android 以外のすべてのデバイスでフラグが立てられますが、害はありません。何も自動的にスケーリングされないことを確認します。

于 2013-07-19T15:54:38.233 に答える
1

iOS で同様の問題がありました。いくつかのテストで解決策が見つかった後、ここで見つけることができます

ビューポート幅の変更後に iOS でズームをリセットする

私のソリューションではズームは無効になっていますが、「user-scalable=no」を自由に削除してズーム可能にすることができます。

于 2015-12-23T14:18:38.787 に答える