iPhone5、6、6+を判別した上でviewportを最適化

こんにちは。一ヶ月ほど前にiPhone6無印を支給されたトランスビットの中の人です。

外）「これで、い　つ　で　も　実機で確認できるから」
中）「……そうですネ（外堀埋められた気分）」

さて、レスポンシブで組むのに慣れてきたと思っていても、色々な問題に出くわします。
その度にちぎっては投げ、ちぎっては投げ……今回はiPhoneのviewport絡みです。

基本的にトランスビットの外の人は幅320pxでスマホ用縦デザインをあげてきます。
いつももっと大きいけど、仮にPC用デザインは幅1024pxとし、画面サイズ480px（スマホ横）からはPC用デザインで表示するとしましょう。
iPhone5以下、6、6+でそれぞれ画面幅が違うので、各デバイスで同一表示になるよう調整します。
※Androidぶったぎりコード

jQuery(function($){

/* ==============================================================================
   0. ユーザーエージェントタブレット・スマホの二極で取得
 ================================================================================ */
var _ua = (function(u){
  return {
    Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1)
    || u.indexOf("ipad") != -1
    || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
    || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
    || u.indexOf("kindle") != -1
    || u.indexOf("silk") != -1
    || u.indexOf("playbook") != -1,
    Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
    || u.indexOf("iphone") != -1
    || u.indexOf("ipod") != -1
    || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
    || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
    || u.indexOf("blackberry") != -1
  }
})(window.navigator.userAgent.toLowerCase());

/* ==============================================================================
   1. まずはviewportの変数を設定
 ================================================================================ */
if(navigator.userAgent.indexOf('iPhone') > 0){
  // iPhoneの場合
  if(window.devicePixelRatio == 3) {
      // iPhone6+
      var vpSp = 'width=320px,initial-scale=1.293750,maximum-scale=1.293750,user-scalable=0';
    }else if(window.devicePixelRatio <= 2){
      // iPhone6以下なら
      var height_num = screen.height * window.devicePixelRatio;
      if( height_num > 1136){
        // iPhone6
        var vpSp = 'width=320px,initial-scale=1.171875,maximum-scale=1.171875,user-scalable=0';
      }else{
        // iPhone5+以下
        var vpSp = 'width=320px,initial-scale=1,maximum-scale=1,user-scalable=0';
      }
    }
  }else{
    // iPhoneに非ず
    var vpSp = 'width=320px,initial-scale=1, maximum-scale=1, user-scalable=0';
}

/* ==============================================================================
   2. 次に、viewportの設定
 ================================================================================ */
 var vpPc = 'width=1024px';
  if(_ua.Mobile){ // スマホ用viewportの設定
    // 初期設定
    $('head').prepend('<meta name="viewport" content="' + vpSp + '">');

    $(window).on("orientationchange", function() {
        // 傾き検出
        if(Math.abs(window.orientation) === 90) {
          // 横向き
          $('meta[name=viewport]').remove();
          $('head').prepend('<meta name="viewport" content="' + vpPc + '">');
        } else {
          // 縦向き
          $('meta[name=viewport]').remove();
          $('head').prepend('<meta name="viewport" content="' + vpSp + '">');
        }
      });

  }else{ // PC用viewportの設定
    // 初期設定
    $('head').prepend('<meta name="viewport" content="' + vpPc+ '">');
  }

/* ==============================================================================
   3. 最後に、ウインドウリサイズ時のviewportの設定
 ================================================================================ */
  $(window).on("resize", function() {
    if( window.matchMedia("(max-width: 479px)").matches ){
      $('meta[name=viewport]').remove();
      $('head').prepend('<meta name="viewport" content="' + vpSp + '">');
    }
    if( window.matchMedia("(min-width: 480px)").matches ){
      $('meta[name=viewport]').remove();
      $('head').prepend('<meta name="viewport" content="' + vpPc + '">');
    }
  });
});

色んな方が書いてくださったscriptを、適当に繋ぎ合わせて動かしてるんですが……。

↓↓ いつも一方的に勝手にお世話になっていて、今回もお世話になった方々のブログ記事 ↓↓
・2015年版JavaScriptユーザエージェント判別・判定
・JavaScript（jQuery）とCSSでiPhone6 Plusを判別するいろいろ
・iPhone 5S 以前だけでなく、iPhone 6 や iPhone 6 Plus でも幅320pxでスケールを固定する方法

みんなこういうのどうしてるんだろう……もしかして、もっとスマートな方法があるんだろうか。
ハナからリキッドデザインなんだろうか……。
ちなみに、私はこのコードの中にハンバーガーメニュー用のスライドトグルを初めとし、「スマホデザインで使う関数や色々」とか、「PC用で使う諸々」とかも、2のとこで一緒にぶち込み、ごった煮にしてます。

今更ながら、$(‘meta[name=viewport]’).remove();から$(‘head’).prepend～の下りを、attrで処理した方が数行稼げる気もするのですが、明日にしてもう寝ます。
ちなみに…。

$(window).on("load orientationchange resize", function() {}

こんな風に、ロードもリロードも傾き変化も、全部くくってしまうと設定がまとまって見やすいです。
何故か、後々別々にわけて動かす必要性が出てくるんですけどね……私だけ？