マルチデバイス エクスペリエンスを最大限に高めるためには、レスポンシブ デザインがおすすめです。 レスポンシブ デザインはユーザー補助にも優れています。
Udacity のようなサイトを考えてみましょう。
小さい文字が読めないロービジョンのユーザーはページを拡大することがあります 400%に設定できます サイトはレスポンシブデザインなので 「小さいビューポート」に合わせて UI が再配置される（実際には大きなページの場合） 画面拡大を必要とするデスクトップ ユーザーに最適 モバイルスクリーンリーダーの ユーザーのために使用できます双方にメリットのある方法です。 同じページを 400% に拡大すると、次のようになります。
レスポンシブに設計するだけで WebAIM チェックリストの 1.4.4 ルールに準拠しています。 これは、「テキストサイズが 2 倍になってもページは判読可能で機能すべき」と記述されています。
レスポンシブ デザイン全般についてはこのガイドの範囲外です。 レスポンシブ対応にするための重要なポイントをいくつか紹介します コンテンツへのアクセスを容易にします
ビューポート メタタグを使用する
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width を設定すると、画面の幅（デバイス非依存ピクセル）が一致します。
initial-scale=1 と設定すると、CSS ピクセルとデバイス非依存ピクセルの間に 1:1 の関係が確立されます。
これにより、ブラウザはコンテンツを画面サイズに合わせます。
文字がくっきりと表示されなくなります
詳しくは、コンテンツのサイズをビューポートに合わせるをご覧ください。
ユーザーにズームを許可する
ビューポートのメタタグを使用してズームを防止できます。
maximum-scale=1 または user-scaleable=no を設定します。
この方法は使用せず、ユーザーが必要に応じてズームインできるようにします。
柔軟な設計
特定の画面サイズをターゲットにするのではなく、柔軟なグリッドを使用します。 コンテンツに応じてレイアウトを変更できます。 上述の Udacity の例で見たように、このアプローチにより、デザインが 縮小した原因が画面の小さいかズームレベルが高いか。
これらの手法について詳しくは、レスポンシブ ウェブ デザインの基本の記事をご覧ください。
テキストに相対単位を使用する
フレキシブルなグリッドを最大限に活用するには テキストサイズなどには、ピクセル値ではなく em や rem などの相対単位を使用します。 一部のブラウザでは、ユーザー設定でしかテキストのサイズ変更がサポートされていませんが、 また、テキストにピクセル値を使用している場合、この設定がコピーに影響することはありません。 ただし、全体を通して相対単位を使用している場合は、 その後、サイトのコピーが更新され、ユーザーの設定が反映されます。
これにより、ユーザーのズームに合わせてサイト全体がリフローできるようになり、 サイトを使用するために必要な読書環境を整えることができます。
ソースオーダーからビジュアルビューを切り離すのを避ける
キーボードでサイト内をタブで閲覧しているユーザー HTML ドキュメント内のコンテンツの順序に従います。 Flexbox や Grid などの最新のレイアウト メソッドを使用する場合は、 ビジュアル レンダリングがソースの順序と一致しなくなることがよくあります。 これにより、キーボードでページを移動する際に、混乱を生じさせてしまう可能性があります。
コンテンツをタブで確認して各ブレークポイントでデザインをテストし、 ページ全体を通したフローは有効ですか
詳しくは、ソースとビジュアル ディスプレイの接続解除をご覧ください。
空間的手がかりを使って注意を払う
マイクロコピーを記述する際は、ページ上の要素の位置を示す表現は使用しないでください。 例: ナビゲーションの「左側」モバイル版では意味がありません ナビゲーションが画面上部にある場合
タップ ターゲットがタッチスクリーン デバイスで十分な大きさであることを確認する
タッチスクリーン デバイスでは、タップ ターゲットが十分な大きさであることを確認します。 他のリンクをクリックしなくても簡単に有効化できます。 タップ可能な要素の適切なサイズは 48 ピクセルです。 詳しくは、タップ ターゲットについての説明をご覧ください。