I need to add my own JS to a customer's existing website. The requirement is that i can't change anything on that website.
In the website, it defines viewport inside the body tag(though it is not a good practice, but as i mentioned, we are not allowed to change anything).
<meta name="viewport" content="width=1600">
I now need to use my JS to change its viewport content to the following. So it can look better on mobile phones.
<meta name="viewport" content="width=device-width">
I tried to modify it with the following code which doesn't work.
document.addEventListener("DOMContentLoaded", function(event) {
for(var i=0;i<document.getElementsByTagName("meta").length;i++){
if(document.getElementsByTagName("meta")[i].name.toLowerCase()=="viewport"){
document.getElementsByTagName("meta")[i].setAttribute("content","width=320px");
}
}
});