Safari @iPhoneで、meta viewportを動的に生成。いつでも横幅ピッタリに収める。

iPhone向けのウェブページやWebアプリを作るときに、コンテンツをSafariの画面の横幅ぴったりに表示したいことがあります。いろいろなページで解説されているように、htmlヘッダに
<meta name="viewport" content="なんちゃら" />
を指定してやれば制御できるのですが、JavaScriptを使ってこのmetaタグを動的に生成して、
  • 3GSでも 4 / 4S でも、
  • これから発売されるかもしれないもっと高解像度のデバイスでも、
  • 将来ディスプレイの縦横比が変更されても、
  • 画面を回転させても、
…いつでも必ずコンテンツが画面の横幅ピッタリに表示されるようにしてみる。

例えば、幅が 700px のページを横幅ぴしゃりに表示させるには、こんな感じでどうだ。
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" id="viewport" />
  <script type="text/javascript">
    ( function(){
      var contentWidth = 700;
      var min_scale =
          Math.round( ( screen.width / contentWidth ) * 10000 , 5 ) / 10000;
      var max_scale =
          Math.round( ( screen.height / contentWidth ) * 10000 , 5 ) / 10000;
      document.getElementById( 'viewport' ).content =
                   'width=' + contentWidth + ' , ' +
                   'minimum-scale=' + min_scale + ' , ' +
                   'maximum-scale=' + max_scale + ' , ' +
                   'user-scalable=no' ;
      } ) () ;
  </script>
</head>
<body>
<!-- コンテンツ -->
</body>
</html>
screen.width / screen.height プロパティで、デバイス画面の縦横サイズ(px)が取得できます。
  • iPhone 3GSならば screen.width = 320、screen.height = 480
  • 4や4Sならば screen.width = 640、screen.height = 960
が返ってくる筈。

<meta name="viewport" content="〜" /> の content= 部分に値を入れていくわけですが、まず width には、コンテンツの横幅を指定します。

するとデバイスが縦置きの場合、コンテンツの縮尺は、「画面の実際の(物理的な)横幅 / コンテンツの幅」となるので、小数点以下4桁で丸めた縮尺値を計算。

これが縮尺の最小値となるので、metaタグの minimum-scale にこの値を指定。

デバイスを回転させたならば、今度は「画面の物理的な縦サイズ / コンテンツの幅」が縮尺値となります。これが縮尺の最大値。なので、maximum-scale にこの値を設定。

最後に、ダブルタップやピンチインでコンテンツの拡大表示をさせたくなかったら、user-scalable=no を指定。

で、このスクリプトを「<meta name="viewport" 〜 />が既に読み込まれて、ドキュメント全体のレンダリングが始まる前」のタイミングで実行してやれば、表示が一瞬乱れる事も無く、万事ＯＫ…という手筈です。

コンテンツの幅をスクリプト内で決め打ちしなくてはならないのと、ユーザの拡大・縮小操作を制限するのが気に入らないけれど「そんなことはいいからピシッと収めたい」というときにはどうぞ。

そのた参考になるページ



カテゴリ:

タグ: