Finding device width and echoing meta viewport rule

Question

I'm looking for a solution to my situation. Basically, I need to use multiple viewport rules for device widths. Something like:

    <meta name="viewport" content="initial-scale=0.4, width=400"> 
    <meta name="viewport" content="initial-scale=0.6, width=700">
    <meta name="viewport" content="initial-scale=0.8, width=1000">

But as we know, we can only use one viewport rule and unlike media queries, There is no (min-width) and (max-width) in the "width" parameter of the viewport rule. What I want to do is, to use Javascript to get the width of the device the user is on and then echo out meta viewport rule based on that.

Say if the width is less than 500px and greater than 400px, Then it will echo one rule. If not, some other rule.. Hope I'm making sense. I'm sure this is achievable but I've not been able to make it happen.

Any help is highly appreciated! Thanks in advance!

Answer 1

Have a look at this simple code snippet that allows you to get the meta content information and the screen width:

function getMetaContentByName(name, content) {
  var content = (content == null) ? 'content' : content;
  return document.querySelector("meta[name='" + name + "']").getAttribute(content);
}

let metaTag = getMetaContentByName("viewport", "content")
console.log(metaTag)

let width = window.screen.width
console.log(width)

<meta name="viewport" content="initial-scale=0.4, width=400">

Now you could create something like this:

let screen = {
  width: window.screen.width,
  height: window.screen.height
}

if (screen.width < 480) {
 document.getElementById("viewport").setAttribute("content", "initial-scale=0.4, width=480");
} else if (screen.width < 720) {
 document.getElementById("viewport").setAttribute("content", "initial-scale=0.7, width=720");
} 

<meta id="viewport" name=viewport content="width=device-width; initial-scale=1">