あなたのキモチ つなげるカタチ

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

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

スポンサーリンク

この記事は2015年9月8日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

「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とスマートフォン分しかない案件などで、さくっとタブレット対応する必要のある時に効果を発揮すると思われます。

スポンサーリンク