javascript - 使图库适合手机查看(小屏幕)

Question

我已经在 HTML/CSS/JS 中创建了一个图片库，但是当我最小化屏幕时，图片更改不会出现，它只是在新窗口中打开图片。

按下图像时的大屏幕:

按下图像时的小屏幕:

我怎样才能保持它那样，只是为了较小的屏幕将它最小化？

这是元素:https://codepen.io/mican/pen/awxmpY?q=magnific&order=popularity&depth=everything&show_forks=false

HTML:

<article class='gallery'>
  <a class='gallery-link' href='https://unsplash.it/1600/1200?image=1081'>
    <figure class='gallery-image'>
      <img height='1200' src='https://unsplash.it/1600/1200?image=1081' width='1600'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1600/1600?image=1014'>
    <figure class='gallery-image'>
      <img height='1600' src='https://unsplash.it/1600/1600?image=1014' width='1600'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1200/1000?image=267'>
    <figure class='gallery-image'>
      <img height='1000' src='https://unsplash.it/1200/1000?image=267' width='1200'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1200/1600?image=266'>
    <figure class='gallery-image'>
      <img height='1600' src='https://unsplash.it/1200/1600?image=266' width='1200'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1000/1400?image=634'>
    <figure class='gallery-image'>
      <img height='1400' src='https://unsplash.it/1000/1400?image=634' width='1000'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1200/1200?image=923'>
    <figure class='gallery-image'>
      <img height='1200' src='https://unsplash.it/1200/1200?image=923' width='1200'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1400/1000?image=682'>
    <figure class='gallery-image'>
      <img height='1000' src='https://unsplash.it/1400/1000?image=682' width='1400'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1000/1400?image=173'>
    <figure class='gallery-image'>
      <img height='1400' src='https://unsplash.it/1000/1400?image=173' width='1000'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1200/1000?image=943'>
    <figure class='gallery-image'>
      <img height='1000' src='https://unsplash.it/1200/1000?image=943' width='1200'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
</article>
<footer id='footer' role='contentinfo'>
  <div class='container'>
    <a class='logo' href='https://codepen.io/collection/XRoxGR' rel='home'>Calibration theme</a>
    <a class='copy' href='https://mobilemarkup.com'>&copy; mobileMarkup.com</a>
  </div>
</footer>

基本上，当在较小的屏幕中按下图像时，它会在较小的屏幕中打开一个新页面，但我希望它像打开较大的屏幕一样打开图库

Answer 1

只需删除此代码，移动设备就会像大屏幕一样

disableOn: ->
    return false if $(window).width() < 640
    return true