VWSとは フォーラム Lightning [ 解決済 ] outerで背景指定した際のモバイル表示について

[ 解決済 ] outerで背景指定した際のモバイル表示について

タグ: 

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #37995

    うさくま堂
    参加者

    固定ページにouterを使い、背景を指定しています。
    当初モバイル用は未設定のままで間延びした画像になっていたため、モバイル用にリサイズした画像を入れました。

    PC用:1900×800
    タブレット用:1600×1600
    モバイル用:1200×1200→780×1200

    PC用のリサイズではなく、全く別画像を同じサイズで入れてもぼやけます。読み込みができていないのではなく画像サイズが悪いのかと思いますが、適切なサイズはどれくらいでしょうか?

    見え方につきましては、画像を添付いたします。

    どうぞよろしくお願いいたします。

    ワードプレスについて
    ・WordPress 5.4.1
    ・Lightning Pro バージョン: 4.8.1
    ・JPNSTYLE バージョン 5.2.0

    作業および確認環境
    ・MacBook Pro 15インチ
    ・外部モニター 23インチ
    ・iPhone11 6.5インチ(828 x 1,792)
    ・iPad7 10.2インチ(1,620 x 2,160)

    Attachments:
    You must be logged in to view attached files.

    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #38012

    Vektor,Inc
    キーマスター

    本件検証中につき追ってご連絡します。

    #38165

    うなこ
    モデレーター

    おそらくですが…
    iOSではbackground-attachment:fixed;が効かないようで、これが問題ではないかなと思っております。

    こちらに詳細が書いてありました。
    background:fixedでの背景固定はiOS(iPhone)でうまく動かないのでこれを使いましょう

    解決策ではないのですが…汗
    タブレットサイズ以下では「固定」にせず、標準のスクロールにする方法はいかがでしょうか?
    こちらですと固定ではなくなってしまいますが… 背景画像は見えるようになります。

    追加cssか子テーマでしたら子テーマのcssに以下のcssを追加してみて下さい。

    @media screen and (max-width: 768px){
    .wp-block-vk-blocks-outer.vk_outer-bgPosition-fixed {
        background-attachment: scroll !important;
    }
    }

    ※@media screen and (max-width: 768px) の数字はお好みのサイズに変えていただいてかまいません。

    #38268

    Vektor,Inc
    キーマスター

    大変お待たせいたしました。

    まず、iPhone での背景固定処理については iPhone 側のバグが原因で、
    いろいろと検証しましたが汎用ブロックにおいて解消する事ができませんでした。
    ※前後に来る要素の仕様がわかっていれば解消して固定表示する手段はあるのですが、利用箇所・利用者の知識レベルがまちまちな状況下で安定して動作させる事ができませんでした。

    それを踏まえて、iPhoneでは「標準」のようにスクロール時に背景画像も追従する形となりますが、
    iPhone側の仕様により画像サイズが適切に表示されずもとの画像サイズで表示されるようになっておりましたので、
    iPhoneの場合も画面サイズに応じて背景サイズを調整して表示するように変更いたしましたので、
    unako さんのコードがなくても同様の表示になるように修正しました。

    VK Blocks Pro 0.31.0 からそのようになっておりますのでご確認くださいませ。

    以上よろしくお願いいたします。

    #38962

    うさくま堂
    参加者

    確認およびご連絡が遅くなり大変申し訳ありません。
    css追加および最新バージョンにて、不具合は無事解消されました。
    ありがとうございました。

    今後ともよろしくお願い申し上げます。

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。