タブレットランドスケープのビューポートサイズとレイアウト考慮事項

タブレットランドスケープ：オーバーラップゾーン

タブレットをランドスケープ方向で使用すると、ビューポート幅は通常ノートPCやデスクトップに関連付けられる範囲に入ります。これにより、同じCSSブレークポイントがランドスケープタブレットと小画面ノートPCの両方に適用される可能性があるため、レスポンシブデザインにおいてユニークな課題が生じます。

ランドスケープビューポートサイズ

デバイス	ランドスケープ幅	ランドスケープ高さ	DPR
iPad Mini (第6世代)	1133px	744px	2x
iPad (第10世代)	1180px	820px	2x
iPad Pro 11"	1194px	834px	2x
iPad Pro 12.9"	1366px	1024px	2x
Samsung Galaxy Tab S9	1205px	753px	2x
Samsung Galaxy Tab S9+	1488px	930px	2x

タッチ vs マウスの問題

1180px幅のランドスケープタブレットは、CSSメディアクエリにはノートPC画面のように見えます。しかし、ユーザーはマウスではなく画面をタッチしています。ホバーステート、小さなクリックターゲット、密集したレイアウトはノートPCでは問題ありませんが、タブレットではフラストレーションの原因になります。@media (pointer: coarse)メディアクエリを使用してタッチ主体のデバイスを検出し、適切に調整してください。

マルチカラムレイアウト

ランドスケープタブレットの幅（1100-1400px）では、通常2-3カラムレイアウトに十分なスペースがあります。ただし、タブレットユーザーはSplit Viewモードを使用している可能性もあり、利用可能な幅が半分になります。固定ブレークポイントでスナップするよりも、スムーズに適応するフルイドグリッドが最良の体験を提供します。

方向変更イベント

orientationchangeイベントまたは@media (orientation: landscape)を使用して、デバイスの回転を検出し対応します。一部のレイアウトは、幅ベースのメディアクエリが提供する以上に、ランドスケープとポートレートで異なる配置が有効です。