Elementorのブレークポイントを見直す

ブレークポイントってなに？

そもそもブレークポイントとは、スマホ・タブレット・PCが入り混じるWEBデザインにおいて、「特定の横幅範囲」を設定し、レイアウトを調整する考え方です。

フィジカル解像度とロジカル解像度

ここで横道に逸れますが、昨今高画素化したデバイスたちは実際の解像度とCSSなどで宣言する解像度に違いがあります。

例えば、総数で最も多いとされる「iPhone 6〜8」の画面解像度は「750 x 1334（横x縦）」ですが、実際にCSSで制御しているのは「375 x 667（横x縦）」のキャンバスになります。

前者を「フィジカル解像度」、後者を「ロジカル解像度」として、図解すると以下の通りです。

小数点以下の数値はOSが飲み込んでアンチエイリアスなどで処理します。

気をつけたいデバイスたちの解像度

前項で解像度についてキャッチアップできました。そこで2024年、流通している主なデバイスのフィジカル解像度とロジカル解像度を表にまとめてみました。

Elementorデフォルトブレークポイント設定は微妙

やっと本題。

Elementorのデフォルト設定を見てみましょう。

これではiPad miniやiPad Proのスプリットビューがスマホになってしまい、iPad Proの縦画面がノートPCっぽい感じになってしまいます。

【結論】おすすめの設定

今日の結論として

で設定・デザインして違和感は少ないです。

Elementorはブレークポイントを増やすことができますが、運用面でカロリーが上がってしまいます。とりあえずしばらくこの設定でやっていこうと思います。