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">

Answer 2

I've also found a straightforward, easier solution. That is by using screen.width attribute and checking for the range of widths and then resetting the attributes for the viewport meta tag. it would look something like this:

    <meta id="vp" name="viewport" content="width=device-width, initial-scale=0.3">
    <script>
    window.onload = function() {

    if (screen.width >= 300 && screen.width < 500) {
    var mvp = document.getElementById('vp');
    mvp.setAttribute('content','initial-scale=0.2,width=device-width');
    }

    else if (screen.width > 500 && screen.width < 600) {
    var mvp = document.getElementById('vp');
    mvp.setAttribute('content','initial-scale=0.4,width=device-width');
    }    

    else if (screen.width > 600 && screen.width < 700) {
    var mvp = document.getElementById('vp');
    mvp.setAttribute('content','initial-scale=0.5,width=device-width');
    }}

This way you can load up different viewport scales, which is exactly what i need. Credit to @Cpncrunch from here: Achieving min-width with viewport meta tag