viewport の指定を JavaScript で行う

スマートフォンサイトを制作するときに欠かせないのが、viewport の指定だ。ページを表示したときに、表示領域の幅や高さ、ズーム操作の可否、ズーム倍率などを指定できる。一般的には、meta タグを使って以下のように指定する。

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

meta タグを自由に記述できる場合は問題ないが、コンテンツの中身だけ制作しシステムの一部として組み込まれる場合や、ルールにより meta タグを追加できない場合もある。しかし、見た目は整えなければならないので viewport の指定は必要だ。タグを追加する方法に比べると少し面倒だが、JavaScript で meta タグを追加する方法を調べてみた。

viewport を指定する meta タグを新規に追加する場合

単純に meta タグを追加するだけなので、エレメントを生成してしてアトリビュートを指定、head 内の最後に追加すればよい。
以下のコードを、ドキュメントが読み込まれた後に実行されるように記述しておけば追加できる。たとえば、body の最後の部分に記述したり、jQuery を利用しているのであれば $(document).ready(function() { … }); の中に記述すればよいだろう。

<script>
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
document.getElementsByTagName('head')[0].appendChild(meta);
</script>

viewport を指定する meta タグがすでにある場合

viewport を指定する meta タグがすでにある場合は、meta タグを取得して内容を変更する。タグ名でエレメントを取得して、name アトリビュートが viewport のものを探してアトリビュートをセットすればよい。

<script>
var metalist = document.getElementsByTagName('meta');
for(var i = 0; i < metalist.length; i++) {
    var name = metalist[i].getAttribute('name');
    if(name && name.toLowerCase() === 'viewport') {
        metalist[i].setAttribute('content', 'width=device-width,initial-scale=1.0');
        break;
    }
}
</script>

viewport を指定する meta タグがあるかないか分からない場合

viewport を指定する meta タグがすでにあるのか、存在しないのか分からない場合は、上記の2つを組み合わせておけばよい。既存の meta タグを検索して見つからなかった場合は、新規に追加する。

<script>
var metalist = document.getElementsByTagName('meta');
var hasMeta = false;
for(var i = 0; i < metalist.length; i++) {
    var name = metalist[i].getAttribute('name');
    if(name && name.toLowerCase() === 'viewport') {
        metalist[i].setAttribute('content', 'width=device-width,initial-scale=1.0');
        hasMeta = true;
        break;
    }
}
if(!hasMeta) {
    var meta = document.createElement('meta');
    meta.setAttribute('name', 'viewport');
    meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
    document.getElementsByTagName('head')[0].appendChild(meta);
}
</script>