0

Magnific popupでギャラリーを表示させたいのですが、特定のスマホ端末、ブラウザ(chrome)上でギャラリーの画像サムネイルを開くと画像だけがページのかなり下に表示されてしまいます。
他の端末では、サムネイルを開くと画面上の真ん中に表示されるのですが…。

Magnific Popup demo
https://dimsemenov.com/plugins/magnific-popup/

こちらのLightbox Galleryタイプのものを使用していますが、このデモは同じ環境でも正常に表示されています。
chromeデベロッパーツールのLG optimus L70、また実機でもLG系のみ表示がおかしいので、かなりマイナーな問題かもしれません。

ギャラリーを開いた時のこちらのhtmlの挙動ですが、
通常であればwidth/heightがこのように画面内に収まるサイズで表示されるのですが

<div class="mfp-wrap mfp-gallery mfp-close-btn-in mfp-auto-cursor mfp-img-mobile mfp-ready" 
  tabindex="-1" style="top: 569px; position: absolute; height: 640px;">

自分の環境だとこのようになります。

<div class="mfp-wrap mfp-gallery mfp-close-btn-in mfp-auto-cursor mfp-img-mobile mfp-ready" 
  tabindex="-1" style="top: 3297px; position: absolute; height: 4496px;">

html内のjsコードはこのようにしています。

jQuery(document).ready(function() {
    jQuery('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        tLoading: 'Loading image #%curr%...',
        mainClass: 'mfp-img-mobile',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1], // Will preload 0 - before current, and 1 after the current image
            mainClass: 'mfp-fade', //フェードインアウトについてクラスを設定
            removalDelay: 300, //ポップアップが閉じるときの遅延時間を設定
        },
        image: {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
            titleSrc: function(item) {
                return item.el.attr('title') + '<small></small>';
            }
        }
    });
});

初歩的な問題かもしれませんが、どなたか対処法がわかる方、ご教授いただけましたら幸いです。

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。