반응 형 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을 추가해야합니다. 아래의 한 줄의 코드를 사용하면 뷰포트의 너비가 모바일 너비로 설정되어 모바일 웹 사이트가 모바일 용으로 준비되지 않은 것처럼 보이게합니다. 당신의 head 요소에 이것을 추가하고 페이지는 데모를 같이한다 : 나는 또한 사진이 가로 모드에있는 것을 볼 수

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

Answer 2

을, 그래서 모바일 장치에서 세로 모드에서 볼 때 이미지 등이 표시됩니다. 세로 방향 이미지를 결합하여 사이트의 전체 프레임을 채울 수 있습니다.