タグ

レスポンシブ

2件の記事

17 分

400%拡大が残す画面領域を実測したら、固定ピクセルという通行料が見つかった

320pxのリフローに合格したページでも、短いビューポートでは本文に残る縦方向の空間が118pxまで減っていた。損失は割合ではなく82pxの固定ピクセル通行料で、その大半はアプリケーションCSSの外側にあるサードパーティの固定コンテナから生じていた。測定手順と回帰ゲートの設計、閾値の置き方まで記録する。

アクセシビリティ WCAG CSS
18 分

リフローを320pxの幅だけで測ると半分しか測れない: 400%拡大の高さ200px

WCAG 1.4.10 リフローを 320x844・320x256・320x200 の3条件で同時に測った。横方向の判定は3条件で1ピクセルも違わず、400%拡大で実際に変わるのは高さのほうだ。82pxの sticky ヘッダーがビューポートの41%を占め、本文の可視領域は6割を切っていた。測定スクリプトも置いた。

アクセシビリティ WCAG CSS