<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)が取得できます。<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>
- 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" 〜 />が既に読み込まれて、ドキュメント全体のレンダリングが始まる前」のタイミングで実行してやれば、表示が一瞬乱れる事も無く、万事ＯＫ…という手筈です。
コンテンツの幅をスクリプト内で決め打ちしなくてはならないのと、ユーザの拡大・縮小操作を制限するのが気に入らないけれど「そんなことはいいからピシッと収めたい」というときにはどうぞ。
そのた参考になるページ
コメント