非レスポンシブのサイトをiPadで見ようとするとiPadが適切なサイズで表示してくれます。例えば、横幅が1200pxあるサイトでもiPadを縦にしたときの横幅768pxに合わせて縮小してくれるのです。

ところが、タブレットサイズに対応していないレスポンシブ対応のデザインだと実寸のまま表示されてしまいます。往々にして横が画面に収まりきらず、横スクロールが発生しちゃうんですよねー。

レスポンシブ対応をするにあたり、iPadなどのタブレット端末はPCと同じ表示でという希望がけっこうあります。

そんなときは、vierportを切り替えてデバイスに合わせて表示する方が楽に対応できると思います。
というわけで、ユーザーエージェントで判別してタブレットとスマホでviewportを切替える方法のメモです。

jQueryに頼りたいと思います。

// スマホとタブレットでviewportを切替え
$(function(){
	var ua = navigator.userAgent;
	if((ua.indexOf('iPhone') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)){
		$('head').prepend('<meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;>');
	} else {
		$('head').prepend('<meta name=&quot;viewport&quot; content=&quot;width=1200&quot;>');
	} 
});

1200の部分をPC版の横幅にすればOKです。上では横幅1200pxで固定しています。

（Photo by William Iven）