If "Desktop site" not checked, this code working fine:
$('#formUploader').on('change', function(e) {
e.preventDefault();
var viewport = document.querySelector('meta[name="viewport"]');
if (viewport) {
viewport.content = 'initial-scale=1';
viewport.content = 'width=device-width';
}
...
}
But if checked, this code ignored.
Need zoom out mobile device screen, if zoomed in and if "Desktop site" checked.
This manipulation need only for centering #imgDivLoading on the mobile device screen, at anytime, zoomed in or out:
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var uploadpercent = e.loaded / e.total;
uploadpercent = Math.round(uploadpercent * 100);
$("#imgDivLoading").css("visibility", "visible");
$('.imgPercent').html(uploadpercent + '%');
if (uploadpercent == 100) {
$('#imgDivLoading').css('background-image', 'url(/imgur/src/maintenance.gif)');
$('.imgPercent').html('Processing');
}
}
}, false);
CSS:
#imgDivLoading {
display: flex;
position: fixed;
z-index: 100;
background-image: url("/imgur/src/loadingscreen.gif");
background-color: rgba(242, 254, 254, 0.7);
background-repeat: no-repeat;
background-position: center;
left: 0;
bottom: 0;
right: 0;
top: 0;
visibility: hidden;
background-size: 250px 250px;
}
Not for responsive site