How to adjust max = “100” of <progress> on the basis of screen size?

Question

I am making a upload feature for my website. The server runs on NodeJS and Express. The client side is based on EJS. So, there's a progress bar for showing how much of the file has been uploaded, but here's where the problem is, the percentage uploaded does not match the progress bar. The Maths turned out to be fine, I resolved the issue by adjusting the max value in the element from 100 to 150. (I don't know why this works, but it just does, please tell me that too if you know the reason)

Now, this only works on a 1920 x 1080 screen, and not on my phone's screen which is 720 x 480. Therefore, I was wondering how I can adjust the max value with CSS (if there is a way) on the basis of screen size with media queries. Here's my client side JavaScript:

 //Upload Handlers and Functions function _(el) { return document.getElementById(el); } function uploadFile() { var file = _("file").files[0]; var formdata = new FormData(); formdata.append("file", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "/uploadFile"); ajax.send(formdata); } //Conversion Functions function convertInputBytes(input) { if(input < 1000000) { output = input / 1000 output = +output.toFixed(2); output = output + " kilobytes out of " return output; } else if(input > 1000000 && input < 1000000000) { output = input / 1000000 output = +output.toFixed(2); output = output + " megabytes out of " return output; } else if(input > 1000000000 && input < 100000000000000) { output = input / 1000000000 output = output.toFixed(2); output = output + " gigabytes out of " return output; } } function convertOutputBytes(input) { if(input < 1000000) { output = input / 1000 output = +output.toFixed(2); return output; } else if(input > 1000000 && input < 1000000000) { output = input / 1000000 output = +output.toFixed(2); return output; } else if(input > 1000000000 && input < 100000000000000) { output = input / 1000000000 output = output.toFixed(2); return output; } } //Error and progress handlers function progressHandler(event) { _("loaded_n_total").innerHTML = "Uploaded " + convertInputBytes(event.loaded) + convertOutputBytes(event.total) var percent = (event.loaded / event.total) * 100; _("progressBar").value = percent; _("status").innerHTML = Math.round(percent) + "% uploaded"; } function completeHandler(event) { _("status").innerHTML = event.target.responseText; _("progressBar").value = 0; document.getElementById("displayedFileName").innerHTML = "Choose another file" } function errorHandler(event) { _("status").innerHTML = "Upload Failed"; } function abortHandler(event) { _("status").innerHTML = "Upload Aborted"; }

And my HTML for the upload form:

 <form id="upload_form" enctype="multipart/form-data" method="post"> <ul class = "actions fit"> <li><label class = "button fit"><input type="file" name="file" style = "display:none;" id="file" onchange = "uploadFile()"><i id = "displayedFileName">Choose File</i></label><li> </ul> <progress id="progressBar" value="0" step = "0.001" max="112"></progress> <h2 style = "text-align: center;" id="status"></h2> <h3 style = "text-align: center;" id="loaded_n_total"></h3> </form>

Answer 1

对于响应式设计，请使用相对长度单位，例如 vw：

  <progress id="progressBar" value="0" step = "0.001" max="100" style="width:80vw"></progress>