レスポンスPhotoswipe

Question

Photoswipeは応答します。しかし、私はモバイルでうまく見えるように私を得ることはできません。

最初の画像はデモ版のマイバージョンです。 Iギャラリーコードをデモからコピーしました。 http://madeleinepersson.net/Photoswipe

   <div id="gallery" class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 
 
     <div class="pswp__bg"></div> 
 

 
     <div class="pswp__scroll-wrap"> 
 

 
      <div class="pswp__container"> 
 
\t \t \t <div class="pswp__item"></div> 
 
\t \t \t <div class="pswp__item"></div> 
 
\t \t \t <div class="pswp__item"></div> 
 
      </div> 
 

 
      <div class="pswp__ui pswp__ui--hidden"> 
 

 
      <div class="pswp__top-bar"> 
 

 
\t \t \t \t <div class="pswp__counter"></div> 
 

 
\t \t \t \t <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> 
 

 
\t \t \t \t <button class="pswp__button pswp__button--share" title="Share"></button> 
 

 
\t \t \t \t <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> 
 

 
\t \t \t \t <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> 
 

 
\t \t \t \t <div class="pswp__preloader"> 
 
\t \t \t \t \t <div class="pswp__preloader__icn"> 
 
\t \t \t \t \t <div class="pswp__preloader__cut"> 
 
\t \t \t \t \t  <div class="pswp__preloader__donut"></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
      </div> 
 

 

 
\t \t \t <!-- <div class="pswp__loading-indicator"><div class="pswp__loading-indicator__line"></div></div> --> 
 

 
      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> 
 
\t    <div class="pswp__share-tooltip"> 
 
\t \t \t \t \t <!-- <a href="#" class="pswp__share--facebook"></a> 
 
\t \t \t \t \t <a href="#" class="pswp__share--twitter"></a> 
 
\t \t \t \t \t <a href="#" class="pswp__share--pinterest"></a> 
 
\t \t \t \t \t <a href="#" download class="pswp__share--download"></a> --> 
 
\t    </div> 
 
\t   </div> 
 

 
      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button> 
 
      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button> 
 
      <div class="pswp__caption"> 
 
       <div class="pswp__caption__center"> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
     </div> 
 

 

 
    </div>

Answer 1

これはPhotoSwipeに固有ではありません： これが私のプロジェクトへのリンクです。あなたのサンプルページは有効なHTML文書ではなく、doctype、html、headまたはbody要素はありません。最初に修正する必要があります。

あなたのページにviewport meta elementを追加する必要があります。下の1行のコードを使用すると、ビューポートの幅はデバイスの幅に設定されます。モバイルブラウザでは、現在あなたのようにモバイル用に用意されていないウェブサイトを「ok」に見せるために、あなたのhead要素にこれを追加し、あなたのページは、デモのようになります。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Answer 2

私はまた、あなたの写真は、風景モードであることがわかり、そのモバイルデバイス上のポートレートモードで見たときの画像のような表示されます。ポートレートのオリエンテーション画像を組み合わせて、現場全体のフレームを埋めることができます。