PCファーストでサイトをコーディングした場合、スマートフォン端末は画面サイズを自動計算して縮小表示します。このままだと可読性や操作性に問題があるため、普通はメディアクエリを使ってスマートフォン用に調整します。

タブレットもブレイクポイントを設定してレスポンシブ対応を行えば問題ありませんが、タブレット対応の工数を省きたいときがあります。タブレットはスマートフォンのように縮小表示してくれないため、ページの右端が見切れ、横スクロールが表示されます。

これを避ける比較的簡単な方法としては、iPadサイズの際はPC、もしくはスマートフォン表示に強制します。

JavaScriptを使う方法もありますが、viewportとCSSの組み合わせで実装することができます。まずはviewportの設定です。

<meta name="viewport" content="width=device-width">

initial-scale の設定をしないのがポイントです。CSSはBODY要素にmin-widthを指定し、スマートフォン用のメディアクエリでmin-widthを初期化します。

body {
	// PC用の横幅を指定
	min-width: 1080px;
}
// スマートフォンのブレイクポイント
@media screen and (max-width: 769px){
	body {
		// 初期化
		min-width: initial;
	}
}

これでPC用サイズの1080pxから770pxまでのタブレットサイズではPC版の縮小表示となります。