iPadをPC表示にする際のレスポンシブ対応 - HTML・CSSテックラボ - [SMART]

PCファーストでサイトをコーディングした場合、スマートフォン端末は画面サイズを自動計算して縮小表示します。このままだと可読性や操作性に問題があるため、普通はメディアクエリを使ってスマートフォン用に調整します。 タブレットもブレイクポイントを設定してレスポンシブ対応を行えば問題ありませんが、タブレット対応の工数を省きたいときがあります。タブレットはスマートフォンのように縮小表示してくれないため、ページの右端が見切れ、横スクロールが表示されます。 これを避ける比較的簡単な方法としては、iPadサイズの際はPC、もしくはスマートフォン表示に強制します。 JavaScriptを使う方法もありますが、viewportとCSSの組み合わせで実装することができます。まずはviewportの設定です。 <meta name="viewport" content="width=device-width">