スマートフォン対応ページ（viewport）
2024年現在「スマートフォン用ページ」というのは必要なくなっています（断言）．
iPhoneの日本販売がはじまった頃（2008）には「やんなきゃ」と思っていたけど，後手にまわってるうちに
iPhone も大型化してきていて「320 px で見られるページ」をつくる必要は完全になくなっています．それどころか逆にジャマになる可能性すらでてきているかも．
ピンチして拡大して見てもらえばよいという意味ではなく，今のスマートフォンの画面サイズ・高精細さだとPC用のページをそのまま表示して拡大せずに読むことができます．
そもそも「スマホ用ページ」のような話がでてきたのは，2008年の iPhone 3G 発売がきっかけ．その仕様はというと…
- 画面サイズ 3.5インチ，320 x 480 ピクセル（163 ppi）．
今は最小サイズのスマホでもディスプレイサイズは 6.1 インチは超えてます．Pro だとか Max だとか大型端末に至っては 7 インチに迫る勢いです（下表参照）． ローエンドの廉価機 Xperia 10 V ですら，6.1 インチ 1080 x 2520 OLED (Full HD+) ディスプレイという豪華さです．
そもそもディスプレイサイズが物理的に2倍近くに大型化してる上に Retina ディスプレイ以来の超高精細ディスプレイのおかげで非常に小さな文字までくっきり読めるようになっています．
またピンチでの拡大スピードも非常に速く，仮に拡大が必要になってもまったくストレスがないというのも大きそうです．
| モデル | 画面サイズ | 解像度 | PPI | 発売日 |
|---|---|---|---|---|
| iPhone 3G | 3.5 | 320 x 480 | 163 | 2008-07-11 |
| iPhone 16 | 6.1 | 1179 x 2556 | 460 | 2024-09-20 |
| iPhone 16 Pro Max | 6.9 | 1320 x 2868 | 460 | |
| Pixel 9 | 6.3 | 1080 x 2424 | 422 | 2024-08-22 |
| Pixel 9 Pro XL | 6.8 | 1344 x 2992 | 486 | |
| Xperia 10 V | 6.1 | 1080 × 2520 | 449 | 2023-07-06 |
ステータスバーの文字読めてますよね？
そもそもの話，現在のスマートフォンの画面デザインは2008年当時とは全くちがっていて システム自体がとても小さい文字を使うようになっています． 例えばステータスバー（画面最上部の時計や電池残量が表示されている部分）の文字を見れば明らかなように，このサイズの文字が読める前提でUIが作られているなら 800px のPC用コンテンツの文字が読めないわけがないです（下図参照）．
|
スマホ用ページ，ジャマなだけかも…
逆にスマートフォン用に対策したページの方がレイアウトが崩れがちで表示される情報量も少なくなりイマイチな気がします． もはやスマートフォン用ページを作る時代じゃなくなってる… あるいは作るとしても 380 px とかじゃなくて，普通に full HD のローエンドPCで見る用ページを作っておくほうがよい気がしてきました．
下図は同じページのスマートフォン用ページとPC用ページを同じスマートフォンで表示させた例ですけど（好みの問題はあるものの）今では既にPC用ページの方が読みやすい可能が高そうです．
 |
 |
| スマホ用ページの例（ref） | PC用をスマホで表示させた例 |
Links
- All About: ウインドウ幅にあわせて画像サイズを変化させる方法
- viewport 設定ノウハウ
- スマートフォンへの対応 meta要素でビューポートを指定する