PC、iPhone、そしてiPadに対応

f:id:Kawan0116:20210429001026p:plain

本日、オンライン飲み会をしました。

コロナで会う事ができないので、LINEのビデオ通話でオンライン飲み会をしました。

それはさておき、このブログでは、ガツンとデザインテーマを作りました。

ちゃんと上手く行っているのだろうか・・・。

出来る限りのことはしたので、あとは運任せ(笑)。

iPhoneをベースに

デザインテーマを作る際、まずは、どれをベースに考えるのかが重要です。

僕の場合、iPhoneをベースにデザインテーマを作りました。

理由は、iPhoneを持っているからです。

iPhoneがあるので、デザインテーマを作って表示の確認が出来ます。

とは言え、いちいちiPhoneで表示確認するのはめんどくさいので、Edge(ブラウザ)の「開発者ツールで調査する」で確認しましたけどね。

実際に実機で確認しておりますが、全く問題ありません。

良かった・・・。

PCで

iPhoneで表示確認を終えたら、次はPCで表示確認します。

こちらも「開発者ツールで調査する」でチェック。

ウィンドウサイズを変えていきながら、問題を摘み取っていく感じです。

ぶっちゃけ、かなり手間がかかりました。

僕の場合、やっちゃいけないことをしています。

それは、「padding」を使う事です。

出来れば使わない方がいいですが、デザインテーマを作る上で「padding」の設定が必要でした。

画面サイズに応じて「padding」を設定する必要があり、かなり手間でした。

今も微調整を実施中です。

まぁ、許容範囲というのがありますけどね。

出来れば、画面サイズが変わってもデザインテーマが破綻しないように気を付けています。

恐らく大丈夫だと思うのですが・・・。

まぁ、あまり気にしないでおこう(笑)。

iPad

iPadは縦と横があります。

画面サイズが微妙に異なる訳です。

よって、それぞれに対応。

メディアクエリを使います。

まぁ、基本、複数のデバイスに対応するならメディアクエリを使う必要がありますね。

メディアクエリは超重要です。

さいごに

しばらくの間は様子を見てその都度対応したいと思います。

デザインの調整はウザイですが、まぁ、仕方ないですね。

程々に頑張ります。