Magnific Popup Android browser full height image

I am trying to make Magnific Popup (http://ift.tt/19O3jkd) to display the whole image and not to fit it on the screen height. This works fine with desktop with this code:

.mfp-image-holder img { max-height: 100% !important; max-width: 100% !important; }

On mobile I have tried:

@media screen and (max-width: 767px) {
  .mfp-image-holder img, img.mfp-img { max-height: 100%  !important; min-height: 100% !important; width: 95% !important; height: auto !important;}
  .mfp-wrap , .mfp-image-loaded, .mfp-container { max-height: 100%  !important; min-height: 100% !important; height: auto !important; }
}

Although this works on Chrome for Android, the default Android Browser keeps on squeezing the image to fit the screen height. I would like the image to be 95% of the screen width and the user to scroll if the height is bigger than the screen. Any tips are greatly appreciated!

P.S. The problem can been seen here: http://goo.gl/nOk89n

Just tap the infographic on your mobile with Android browser

Best regards,

Spyros