【JS】スクリプトで制御するviewportの記述が万能でGOOD!!

「viewport」はマルチデバイス対策の記述として非常に重要です。

私はこれまで下記のようにviewportを記述していました。

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

これは、おそらく最も普及された記述方法あり、わずかな記述量でWEBページを各デバイスの横幅に合わせて表示することができます。
ですので、私は特に深く考えることもなく、レスポンシブウェブデザインの案件ではこの記述方法を採用していました。

しかし、ある時フロントエンドエンジニアの先輩から
「JavaScriptでユーザエージェント判定を利用すれば簡単にタブレット対応ができるよ」と声をかけられ、新しい書き方を教えていただきました。

JavaScriptを利用したviewportの記述

var ua = navigator.userAgent;
var getDevice = (function(){
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
        document.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">');
    }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
        document.write('<meta name="viewport" content="width=1280, user-scalable=no, maximum-scale=1.0">');
    }else{
    document.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">');
  }
})();

JavaScriptを利用したviewportの解説

この記事で紹介している記述方法ではデザバイスがスマホ時、タブレット時、それ以外（PCページ）の時にユーザエージェント判定で適用させるviewportを振り分けています。

文頭で記述したviewportとの主な違いは
タブレットでページを閲覧をした時に表示領域の幅が1280pxで表示される点です。

この設定にすると、タブレット上でPC用のページがに縮小されて表示されます。
もちろん、タブレット用のデザインがあればこの設定は使えませんがPCとスマートフォンのデザインだけ支給され、工数や費用もPCとスマートフォン分しかない案件などで、さくっとタブレット対応する必要のある時に効果を発揮すると思われます。

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。