Wix エディタ:ライブモバイルサイトの配置に関する問題

読了時間:3分
異なるブラウザやデバイスは異なるレンダリングエンジンを使用するため、サイトのコンテンツがすべてのモバイル端末で同じように表示されない場合があります。たとえば、特定のモバイル画面では、テキストパーツが拡大したり、重なったり、他のパーツとずれて表示されることがあります。
この記事では、モバイルでの配置の問題を解決する方法について説明します:

1行のテキストが 2行に分割される

モバイルエディタで 1行で表示されるテキストがライブサイトで 2行に分割されて表示されることがあります。これはデバイスによって異なり、画面によって表示が異なる場合があります。
モバイルエディタとライブモバイルサイトのテキストを示すスクリーンショット。
この問題を解決するには、ハンドルをクリックしてドラッグし、テキストボックスの幅を広げてください。これはテキストボックスを大きくするだけで、文字サイズ自体には影響しません。
モバイルエディタでテキストボックスを広げている GIF。

テキストと他のパーツが重なる

サイトに単一のテキストボックスで大量のテキストを追加し、その上にパーツを追加した場合、ライブサイトでテキストが他のパーツと重なることがあります。これは通常、デスクトップエディタでサイトに追加したテキストに見られます。
モバイルエディタとライブサイトの両方に表示されているテキストとボタンの画像。ボタンがライブサイトのテキストと重なっています。

問題を解決する方法:

  1. デスクトップエディタを開きます。
  2. テキストを複数のテキストボックス(段落ごとに 1つ)に分割します。
  3. テキストボックスの間にスペースを空けてパーツを追加します。
  4. パーツをグループ化して、正しく配置されていることを確認します。パーツをグループ化する方法はこちら
デスクトップエディタの画像。テキストは異なるボックスに分割されており、ボタンはそれらの間にあります。

テキストが他のパーツとずれる

単一のテキストボックスにたくさんのテキストを追加した場合、モバイルライブサイトの他のパーツとずれて表示されることがあります。
モバイルエディタとライブサイトの同じページ。ライブサイトでテキストとベクターアートの位置がずれています。

テキストを他のパーツと揃える方法:

  1. デスクトップエディタを開きます。
  2. テキストを複数のテキストボックス(段落ごとに 1つ)に分割します。
  3. テキストを関連するパーツごとにグループ化します。パーツをグループ化する方法はこちら

モバイルサイトにおける他のパーツとの配置の問題

モバイル版サイトで、横並びに配置したパーツが正しく表示されないことがあります。
横並びに配置したパーツがずれないようにするには、パーツをグループ化して、透明なコンテナボックスに追加してください。
次のステップ:
  • ページレイアウト最適化ツールを使用して、小さい画面に合わせてモバイルサイトのコンテンツを自動的に整理・更新し、モバイルサイトで一貫性のある配置を確保しましょう。ページレイアウト最適化ツールに関する詳細はこちら
  • 新エディタを使用してサイトを構築している場合、ページレイアウト最適化ツールにはアクセスできません。これは、Wix が新エディタで自動的にモバイルレイアウトを最適化するためです。

お役に立ちましたか?

|