スマホとタブレットでviewportを出し分ける

以前にレスポンシブWebデザインでタブレット版がないときの対応の記事を書きましたが、最近viewportを出し分けたい時に使うコードを改めてまとめておきます。

ユーザーエージェントを使う場合

まずはユーザーエージェントを使う方法で、仕組みとしては以前の記事のjQueryを使わない版になります。
下記コードをhead内に記述します。

// ユーザーエージェント
var ua = navigator.userAgent.toLowerCase();
var ver = navigator.appVersion.toLowerCase();
var uaList = {};
uaList['isiPhone'] = (ua.indexOf('iphone') > -1) && (ua.indexOf('ipad') == -1);
uaList['isiPad'] = (ua.indexOf('ipad') > -1);
uaList['isAndroid'] = (ua.indexOf('android') > -1) && (ua.indexOf('mobile') > -1);
uaList['isAndroidTablet'] = (ua.indexOf('android') > -1) && (ua.indexOf('mobile') == -1);
uaList['isTablet'] = (uaList['isiPad'] || uaList['isAndroidTablet']);
uaList['isSP'] = (uaList['isiPhone'] || uaList['isAndroid']);

// viewportの設定
var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
if(uaList['isSP']) {
	viewport.setAttribute('content', 'width=device-width, initial-scale=1.0');
} else {
	viewport.setAttribute('content', 'width=1200');
}
document.getElementsByTagName('head')[0].appendChild(viewport);

ユーザーエージェントで判別するデモページ

画面の幅を使う場合

基本的にはユーザーエージェントを使う方法が便利だったのですが、将来的にchromeでユーザーエージェントを使った判別ができなくなるようです。
参考: ChromeでUserAgentが凍結される日（User Agent Client Hintsの使い方） – Qiita
そこで別の方法として、screen.widthを使って画面の幅で判別してみます。

// viewportの設定
var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
if(screen.width < 768) {
	viewport.setAttribute('content', 'width=device-width, initial-scale=1.0');
} else {
	viewport.setAttribute('content', 'width=1200');
}
document.getElementsByTagName('head')[0].appendChild(viewport);

画面の幅で判別するデモページ
今回は768未満をスマホとして判別しましたが、タブレットによっては768px以下の画面幅のものも一応あります。
その場合はスマホの表示になる形で個人的には問題ないと思いますが、案件の仕様や対応端末の範囲などに応じて適宜変更してください。