モバイル端末での閲覧にウェブサイトを最適化する方法

なぜ必要なのか、どのように機能するのか

ブロックがデスクトップではよく見えるが、モバイルではあまりよく見えない場合、ブロックの可視性を980px以上に設定するとよいでしょう。こうすることで、ブロックはデスクトップ向けになり、モバイルデバイスでは表示されなくなります。

その後、ブロックをコピーし、設定を調整することでモバイルでの表示に最適化します（画像やフォントなどを変更することもあります）。ブロックの可視性を "0-980px" に設定します。その結果、モバイル版のブロックが表示されます。

最終的に、PCからアクセスしたユーザーにはデスクトップ版が、モバイルユーザーにはモバイル版が表示されます。

ブロックの可視性は、ブロックの設定パネルで見つけることができるパラメータであり、特定の画面解像度のデバイス上でブロックを表示したり、表示しなかったりするように調整することができます。例えば、あるブロックはタブレットで、またあるブロックは携帯電話でうまく表示されません。

見ての通り、モバイルでは表紙がトリミングされ、あまりよく見えない。

モバイルデバイスに表示されないようにするには、カバーブロックの設定パネルでブロックの可視性を"> 980px "に設定する。これで、モバイルユーザーには表示されなくなります。

ブロックをコピーする。

モバイル版用にブロックを調整する-写真とテキストの配置を変更する。

ブロックの可視性を"≦980px "に設定したので、980pxより広い画面のデバイスには表示されません。

完了！これで、画面の幅によってカバーの表示が変わります。