スマホとPCでブラウザの挙動（見た目）が違うので辛いという話

Next.jsにはあまり関係がないかもしれないが、念のためNext.jsのプロジェクトでのこと

・セレクトボックスにdisabledが付いてる

最初の選択肢をdisabledにして、プレースホルダのように見せることがよくあると思う。
そのせいかは不明だが、PCのChromeで見たときは特に違和感ない見た目だったが、
iPhoneのSafariで見たときにグレーアウトしていてdisabledになっているように見える。
実際問題なく選択できるためdisabledにはなっていないのだが、明らかに見た目としてアウト。
これはbackground-colorにwhiteを指定すれば、異なるブラウザやデバイスで一貫した見た目にすることができた。

・下部分が見切れている

スマホで見たときに起こりがちな問題だと思われる。
もちろんPCのChromeのエミュレータでは起きない問題で、
画面下部のコンテンツが見きれて表示できない現象だ。
これはheightに100%を指定すれば改善されるはずだ。

・スペックを気にする

PCだとサクサク動いていてもスマホだともっさりしたり画面の描写が遅いということがある。
スマホ向けで開発しているのであれば、スマホでの挙動はかなり意識し、パフォーマンスの最適化を優先したほうが良い。

・横画面になった時（いろんな画面幅に対応する）

スマホユーザーであれば横画面でwebサイトを閲覧することもあるだろう。
その時、あまり意識していないサイズ感でみることになる。
この場合、フレキシブルレイアウトを意識した構成にしておくとそこまで気にならない。
逆に、画面幅がとても狭くなった場合でも対応できる（ある程度の妥協は必要になってくるが）。