なぜ Silktide は iPhone 5 でテストするのですか?
Silktide の自動モバイルチェックは、シミュレートした iPhone 5(CSS 幅 320 ピクセル)で実行します。これは意図的な選択です。これは、今日お客様にサイトがどう見えるかを示すための端末というわけではありません。
テストと表示の使い分け
| 画面上の表示 | 端末 | 理由 |
|---|---|---|
| アクセシビリティ/モバイルの各種チェック | iPhone 5 (320px) | WCAG のリフロー要件の幅に一致 |
| ホームページの概要スクリーンショット | iPhone 16 | 見た目に配慮した現行世代の端末での表示 |
| Inspector のデバイスプリセット | iPhone 5, X, 14, 16 など | プレビューする端末は任意に選択可能 |
つまり、レポートの記載に iPhone 5 が登場する場合は、それはテスト用ビューポートを指しています。サイト概要に現行の端末フレームが表示されているのは、プレゼンテーションです。
なぜ 320 ピクセルなのか
の成功基準 1.4.10 リフロー()は、(地図やデータ表などの限定的な例外を除き)読者に水平・垂直の両方向へのスクロールを強いないで、幅 320 CSS ピクセル のビューポートにコンテンツが収まることを求めています。
320 CSS ピクセルという幅は、大きな画面で約 400% にズームしたときにも相当します。この幅でテストすることで、次のような場合にレイアウトが崩れる問題を捉えられます:
- 小型のスマートフォンを使う人
- ページを拡大して閲覧する人
- 細い幅のブラウザーウィンドウを使うすべての人
iPhone 5 は、その論理幅がちょうどそのサイズである、扱いやすく広く知られた端末にすぎません。新しい端末は CSS ピクセル上の幅が広いため、同じはみ出しを隠してしまうことがあります。最新の端末だけで問題なく見えることは、リフローの達成としては不十分です。
今も iPhone 5 を用いるチェック
次のチェックは、その小さなモバイルのビューポート(ほかの判定要素とあわせて)でページを読み込みます。
現行端末を使うもの
- ホームページの概要スクリーンショットは、取得できる場合は iPhone 16 を使用し、レポートが現行の端末に見えるようにしています。
- Inspector では、iPhone 16 を含む複数の端末でページをプレビューできます。これはそれらのチェックの採点方法を変えるものではありません。