iPadで端が切れたり余白できたり。。スマホとiPadでviewport設定をjsで振り分ける

スマホはレスボンシブ、iPadはPC画面縮小表示したい。
そんな訳で実装する為に、

↓この3つについてご説明します。
・レスボンシブサイトのviewport設定
・PC表示をそのまま縮小する為のviewport設定(iPad用)
・デバイスによってviewport設定を振り分ける

レスボンシブサイトのviewport設定

まずこちらから。
表示画面サイズの設定は、content=widthの値をどうするかですが、

Googleが推奨する設定に縮小はさせない設定の↓こちらがスタンダードです。

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

・幅を各デバイスのサイズに合わせる（width=device-width）
・初期設定は等倍表示（initial-scale=1.0）
・縮小はさせないようにする（minimum-scale=1.0）

ちゃんとメディアクエリも効いている。

ただ。。。
iPadだと端が切れる。。（涙）

iPadのviewport設定(PC表示をそのまま縮小する)

PC表示をそのまま縮小したい時は、
content="width=910"（910はサイトの幅です）とすれば良いです。
（「px」など単位はつけない事！）

↓こんな感じですね。

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

↑で無理ならcssで↓こちらの記載あるか確認

html,body{
    width: 100%;
}

iPadの表示OK!!

ところが。。。
スマホのレスボンシブが効いてない。。
バカでかい表示になってしまっている。。

viewport設定をjsで振り分ける

んじゃ、PC＆iPadとスマホでviewport設定を分ければいいじゃん。

って事で↓こんな感じで設定しました。

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
        //iPhone、iPod、Androidの設定
        document.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">');
    }else{
        //それ以外（PC、iPadなど）の設定
        document.write('<meta name="viewport" content="width=910,initial-scale=1.0,minimum-scale=1.0">');
    }
</script>