WixスマホサイトでiphoneとAndroidでレイアウトが揃わないのはなぜ？

恥ずかしながらWixをいじらなくなって久しいのですが、久しぶりのWixネタを投下します。

Wixで作ったサイトをスマホで見たら、iphoneとAndroidでレイアウトが変わってしまう、崩れてしまうということがありませんか？

よくあるのが、テキストボックスが変な位置で折り返したり、図形の上に載せたテキストが図形をはみ出すような事例です。

実はWixではあることに気を使ってサイトを作らないとiphoneとAndroidで見た目は変わります。

この記事では、Wixエディタの見た目通りにサイトを作るコツをまとめておきます。

この記事で分かること

Wixエディタと実際のデバイスのサイト表示が異なる一番の原因

これは意外な盲点なのですが、Wixエディタにある、テキストの行間指定の『自動で最適化』がキーワードになります。

テキストの行間隔指定は、初期値で自動最適化になっています。これはWix側の粋な計らいで、素人が悩まなくてよくなるようにその設定になっていると思います。

普通の人は、自動最適化と聞くとお任せしておけば最適になるんだから下手な考え休むに似たりと思いますが、実はソコに罠があります。

結局、行間隔を自動最適化にしてしまうと、表示するデバイス、OS毎に最適化されてしまうので、どのような結果になるのか、Wixエディタで確認できないのです。

特にモバイル表示はiphoneとAndroid、同一OSでも画面幅も変わりますので、自動最適化だと訳が分からなくなります。

Wixエディタで確認できないということは、実機で調整することになります。しかし、実機をすべて持っているわけもありませんので、これは正気の沙汰ではありません。そもそも、デバイスごとの違いを無理やり吸収しようとレイアウトを調整すると2者択一になってしまう場面が出てきます。

どうにか、モバイル表示をコントロールする方法はないでしょうか？

テキストの行間隔指定を自動で最適化からカスタマイズに変更します。

カスタマイズに変更すると、数値を指定するようになります。初期値の1.2から特に変更しなくてよいと思いますが、気になる人は調整してください。

iphoneやAndroidの違いで最適化されなくなるので、Wixエディタで指定した値がそのまま引き継がれます。つまり、Wixのモバイルエディタの画面のテキスト表示がそのままデバイスで再現します。

この状態なら、Wixエディタで一生懸命レイアウト調整してもデバイスごとに表示・レイアウトが崩れるかどうか心配しなくてよくなります。

まず、私のスタンスはWixでのサイト構築はおススメしていません。

Wixで普通に作るとWixは制限が強く、Wix臭さがどうしても出てしまうからです。

そのWix臭さを消す作業をするのはもちろん可能ですが、費用対効果を考えるととても不毛な作業です。クソ重くなるWixエディタでがんばって編集するよりは、Wordpressや純粋なHTMLサイトの方が自由度も高いので、そちらでスキルを高める方が健康的だと思います。

今回の行間隔の自動最適化もWixでサイトを構築を継続している人にとっては常識かもしれません。しかしWixをある程度さわっていた私は知りませんでした。Wixのお任せ機能は気を付けようというお話でした。