Quirks with suggested responsive image code

[tomdav999]

1. Is there a reason to switch to smaller images on resize? It makes sense to upsize but why downsize? For example, the user could be rotating the screen back and forth and this can invalidate things if width vs. height is on the cusp. Using max(screen.width, screen.height) solves this issue but then if the keyboard pops up (user might be copying url) or some other temporary event causes the screen height to shrink temporarily this can also invalidate things and cause new images to load in both directions. I think it only makes sense to upsize, not downsize since a downsize is likely a temporary event, particularly with touch devices.

2. Is there a reason why the responsive code on the photoswipe home page is inconsistent with the documentation? I would think the home page should be consistent with the documentation to the extent it serves as a test page.

Here is what I am using for my code to minimize these quirks (note: changes are relative to the code on the photoswipe home page as it seems more current):

var realViewportWidth,
  useLargeImages = false,
  firstResize = true,
  imageSrcWillChange;

gallery.listen('beforeResize', function() {

  var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
  dpiRatio = Math.min(dpiRatio, 2.5);
  realViewportWidth = gallery.viewportSize.x * dpiRatio;


//  if (realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200) {
// *** use Math.max(screen.width, screen.height) ***
  if (realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || Math.max(screen.width, screen.height) > 1200) {
    if (!useLargeImages) {
      useLargeImages = true;
      imageSrcWillChange = true;
    }
// *** don't downsize! ***
//  } else {
//    if (useLargeImages) {
//      useLargeImages = false;
//      imageSrcWillChange = true;
//    }
  }

  if (imageSrcWillChange && !firstResize) {
    gallery.invalidateCurrItems();
  }

  if (firstResize) {
    firstResize = false;
  }

  imageSrcWillChange = false;

});