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

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

タグ: 

  • このトピックには2件の返信、3人の参加者があり、最後にunakoにより1日、 9時間前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #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

    unako
    参加者

    おそらくですが…
    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) の数字はお好みのサイズに変えていただいてかまいません。

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