スマホ、タブレット、PCでは画面サイズが違うため最適な設計をすべき。
考慮点
HID（タッチ／マウス／キーボード／ゲームパッド）
スマホとPCの最も大きな違いはHID（人間用インタフェース）である。スマホは画面を指で触れることで操作する。PCはマウスやキーボードで操作する。そのイベント処理をJavaScriptで実装せねばならない。
だいたい以下のようなパターンがある。
ほかにもカメラでモーションキャプチャしたり、マイクで音声入力する方法もある。
また、スマートウォッチ（腕時計型）やスマートグラス（メガネ型）がある。
だが一般的でなく、手間もかかり非効率なため省略する。
スマホのタッチ操作とおなじことをマウスでさせるような構成にすれば、共通化できる。だが、マウスはポインタであり、ホバーなどタッチにはない機能がある。どうしても違いが出てしまうため、ムリに共通化するよりも各HIDに最適化した画面を構成するほうがよい。ただし、開発コストが大きくなりすぎる。プロジェクトに適した選択が必要になる。その判断を下すためには、膨大な知識が必要だし、トレードオフになるため、むずかしい。
操作（スマホ）
かつてスマホは片手でもち、親指で操作するのが一般的だったように思う。しかし昨今はスマホが大型化してきた。重さも増した。片手でもつと大きすぎて持てなかったり、手や指を痛めてしまうようになりつつある。かといって両手でもつには小さいため、どうにも中途半端である。ユーザとしては片手で操作できたほうが、ながら操作ができて便利なのだが。
スマホにおける画面サイズは、閲覧性と操作性とのトレードオフである。大きな画面のほうが多くの情報を高品質でみれる。けれど重くて大きいから片手で操作できず、ながら操作がむずかしい。小さな画面なら片手で操作できるが、表示できる情報量が少ないため、操作量が増えてしまう。
スマホは持ち運びできるコンパクトさがウリだが、操作性まで考えるとぜんぜんスマートじゃない。表示できる情報量が限られているため、要点だけを絞るのがよい。
タッチはマウスと比べて精密なポインティングができない。そのため画面に配置するタップ要素を大きくして数を減らす必要がある。画面の小ささも相まって、かなり簡略化することになる。
タッチは指で画面を覆い隠すため見づらい。
操作（ガラケー）
かつてガラケーは片手＋親指で操作するものだった。親指族とよばれ、高速にボタンを押す人々であふれかえっていた。思えばガラケーのほうが片手による操作性は高かったかもしれない。ただし指の可動範囲が狭いため、配置できるボタンにも限りがある。そのため文字を入力するためのタイプ数が膨大になってしまうのが欠点だった。
やはり入力はキーボードが最強である。
ディスク
ディスクは記憶装置である。当然デバイスごとに別のディスクであり、そのままではデータ共有できない。
現代ではデバイスを使い分ける場面が増えた。外出先ではスマホ、職場ではデスクトップPC、自宅ではノートPCなど。それぞれ異なるディスクをもっているため、データを共有するには工夫が必要だ。各デバイスともインターネット接続し、サーバに共有データを保存し取得することで解決する。ユーザを特定するためにはアカウント管理が必要であり、ユーザIDとパスワードが必要。各デバイスにアカウントを保存することでデータ共有する。
画面サイズ（据え置き／モバイル）
スマホは320px、PCは1920px、その差はなんと1600px。おなじ画面構成だと、小さいスマホのほうはスクロール地獄になってしまう。回避するためにはコンテンツ量を減らす必要がある。それは、もはや別物をつくるようなものだ。
レスポンシブ対応と呼ばれている。画面サイズに応じて適切な画面を作ることである。ただ、実際にはそのほかにもイベント処理を変えねばならない。タッチ、マウス、キーボードのように、操作デバイスが違うため、イベント処理の実装も変えねばならない。
サイズ単位
ディスプレイは画素の集合である。1画素あたりの物理的な大きさは不定だ。デバイスによって1画素の大きさが異なる。1pxと1画素はイコールではなく、あくまで1pxは仮想値である。CSSでの1pxは1inch(2.54cm)の1/96である。つまり96px=1inch=2.54cm。だが、それも仮想値である。本当に1inchを再現できるわけではない。実際のサイズはディスプレイのハードウェアによって変わる。ディスプレイごとにdpi(dot per inch)が違う。1inchあたり何画素あるか違う。さらに、高解像度ディスプレイは物理画素数よりも多くのピクセル数をもてる。その比率をデバイスピクセル比と呼ぶ。これらのせいで最終的に表示されるサイズは極めて複雑な計算を経た結果である。
デバイス方向（縦／横）
スマホは縦、PCは横。
スマホは手でもって方向を変えることができる。PCは据え置きなので画面の向きは固定である。そうした違いがあることから、スマホ用ではアスペクト比が逆転したときの最適な画面設計もしておく必要がある。
アスペクト比（縦／横）
スマホのiPhone13は2.17:1。PCは16:9（1.777:1）。
あまりにもアス比が違いすぎるため、段組みを検討する必要がある。とくに5:4（1.25:1）と比べると、2.17:1のものは倍近く違う。
書字方向（縦／横）
ふつうは横書き。日本だと縦書きもある。
CSSの縦書きにはバグや未実装があるため使いにくい。でも本のように縦書きで読みたい。
画面サイズやアス比にも注意。日本語なら一行あたり40字くらいが読みやすいらしい。それに合わせて画面が縦のときは縦書き、横なら横書きにするなどしてもいいかもしれない。
縦書きには縦中横など特殊な表現がいくつかある。それを実装するためHTMLを作り込まねばならず、横書きとは別のHTMLになってしまう。
費用対コストが低いためか、あまり使われていない。
結論
なるだけ簡単かつ効果的にする。具体的にはスマホorタブレット用（タッチ＆1024px以下）とPC用（マウス＆1025px以上）の２タイプを設計すべき。
どうあっても絶対にひとつには集約できない。それを自動的にいい感じにしてくれるライブラリとかあればいいのだが。
