モバイルとデスクトップのビューで画像の表示が異なります

モバイルとデスクトップで画像の表示が異なるのはなぜですか?

GemPagesは、さまざまな画面サイズに応じてページレイアウトを自動的に調整します。 応答設計 原則です。画像が異なって見える最も一般的な理由は次のとおりです。

• レスポンシブなサイズ変更: 画像は各デバイスに合わせて拡大縮小されます。これにより、画像のサイズ、アスペクト比、または切り抜きが変更される場合があります。
• デバイスの可視性設定: 画像をデスクトップのみ、モバイルのみ、または両方で表示するように設定している可能性があります。
• 各ビューのカスタムレイアウト: モバイル用とデスクトップ用のセクションを個別にカスタマイズすると、バリエーションが生じる可能性があります。

この問題を修正するにはどうすればよいですか？

デバイス間で画像の一貫性を保つ方法は次のとおりです。 GemPages エディター ダッシュボードにアクセスし、以下の簡単な手順に従ってください。

表示設定を確認する

1. 画像要素をクリックします。

2. 左側のサイドバーで、 高機能 タブには何も表示されないことに注意してください。

3. までスクロールします に表示.

4. 適切なデバイス (デスクトップ、タブレット、モバイル) を選択します。

画像サイズを手動で調整する

1.に切り替え モバイルビュー デバイススイッチャーを使用します。

2. 画像要素を選択します。

3. サイズ変更と間隔のコントロールを使用して、モバイルでの画像の表示方法を調整します。

4. 繰り返します タブレットビュー 必要に応じて。

デバイス間で同じ画像要素を使用する

あなたが使用している場合 同じ画像要素 すべてのデバイス（デスクトップ、タブレット、モバイル）で、次の点に留意してください。

• 画像は リサイズ or 切り取った 画面サイズによって異なります。
• 余白、パディング、またはセクションのレイアウトにより、画像が移動したり伸びたりする場合があります。
• 小さい画面では、同じ画像が大きく見えたり、フォーカスが失われたりすることがあります。

見た目の一貫性を保つには:

1. 画像要素を選択します。

2。 使用 デバイススイッチャー 各デバイスでどのように表示されるかをプレビューする

3. 最大幅/高さ、パディング/マージン、オブジェクトフィットなどの設定を調整します。

4. 各デバイスに異なる値を適用するには、 デバイスアイコン 各設定の横にあります。

各デバイスごとに異なる画像バージョンをアップロードする（オプション） 

1 つの画像がすべてのデバイスで適切に機能しない場合は、次の方法を試してください。

1. 同じ画像の複数のバージョンを準備します（例：デスクトップ用とモバイル用に最適化）。

2. 各バージョンをレイアウト内の個別の画像要素としてアップロードします。

3。 使用 透明性 デバイスに応じて各画像を表示/非表示にする設定。