PC(タブレットも)とスマホでviewportの指定を振り分ける

レスポンシブサイトをつくっててviewportの指定をしたんだけど、iPadだと余白がでる……。
なんでじゃーーー。
全体をoverflow: hidden;しても余白直らない……。

いろいろ悩んだけど、今回の件はどうもiPadでPCサイトを表示するという認識がうまくはたらいてなかったみたいです。原因はよくわからなかった。

ただ、以下のviewport振り分けをすると余白なくなった。よくわからん。

というわけで、本題。
基本的にviewportは1行だけの指定でいいけど、たまに振り分ける必要があったり。その場合の処理をメモ。

<script type="text/javascript">
 if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
  document.write('<meta name="viewport" content="width=device-width,initial-scale=1.0">');
 }else{
  document.write('<meta name="viewport" content="width=1000,initial-scale=1.0">');
 }
</script>

スマホだとデバイスの幅に合わせるよ。それ以外(PCとタブレット)だと、1000pxの幅で表示するよ。っていう設定。

走り書きすぎるので、もうちょっと後日詳しく残します。