320px対応、メディアクエリで頑張る前にviewport-extra | TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
モバイル向けデザインカンプは375px幅が主流であり、iPhone SE（初代）等の320px幅の端末では、レイアウトの突き抜けやテキストの見切れが発生しやすい。これをメディアクエリで個別に微調整しようとすると、膨大なコード量とメンテナンスコストを強いることになる。
// Approach
ライブラリ「viewport-extra」を導入し、HTMLに専用のmetaタグを追加する。JavaScriptがviewportのmetaタグを動的に書き換えることで、設定したmin-widthを下回る画面幅において、ページ全体をスケールダウンさせて表示させる手法をとる。
// Result
非同期読み込みと軽量な設計により、パフォーマンスへの影響は無視できるレベルに抑えられている。CSSの新しい単位（dvh等）では実現不可能な「ページ全体の比率を保った縮小」を、最小限のコード追加で実現できる。320px端末のシェアは減少しているが、互換性確保の手段として有効である。
Senior Engineer Insight
> 実戦的な視点で見れば、これは「完璧なレスポンシブ」を諦め、「許容可能な表示」を低コストで実現する合理的な妥協案である。320px端末への対応は、現代のプロダクト開発においては優先度が低い。しかし、メディアクエリの爆発的な増加を防ぎ、開発工数を劇的に削減できる点は評価できる。ただし、縮小表示によるアクセシビリティ（視認性や操作性）の低下は避けられないため、単なる「回避策」としてではなく、UX設計の観点から意図的に採用すべき技術である。