レスポンシブでタブレットとPCを同じにするためスマホとタブレットでviewportを切替える

  • 公開日:2015/11/6
この記事は最終更新日から7年以上が経過しています。

非レスポンシブのサイトを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)