CODEWITHSUNDEEP
javascripthtml
Wilhelmina Lohan
Wilhelmina Lohan

Reputation: 3043

Dynamically set meta viewport scale

https://stackblitz.com/edit/js-meta-viewport

In Chrome debugger I can see the meta tag updating when I click "can scale" but am unable to scale on mobile device (Nexus 5 (Chrome 70)).

Ultimate goal is to dynamically allow and disallow scaling in the same spa, on mobile.

Edit:

I have been successfully toggling the meta viewport tag from 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.0, minimum-scale=0.0, user-scalable=yes">

to

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

also variations not including minimum-scale

and back but this seems to have no effect or change in behavior specifically the ability for the user to "zoom" on my Nexus 5 (Chrome 70).

I have tried assigning viewportTag.content = content, calling viewportTag.setAttribute('content', content), and re-rendering document.head.removeChild() then document.head.appendChild(). again all successfully toggles the markup but has no behavior

assigning: https://stackblitz.com/edit/js-meta-viewport

setAttribute: https://stackblitz.com/edit/js-meta-viewport-answer (https://stackoverflow.com/a/53899867/6656422)

redraw: https://stackblitz.com/edit/js-meta-viewport-redraw

Update:

The solution here works https://stackblitz.com/edit/js-meta-viewport-answer (https://stackoverflow.com/a/53899867/6656422) but I don't understand why, its not setAttribute() because https://stackblitz.com/edit/js-meta-viewport-setattribute does not work

Upvotes: 4

Views: 10613

Answers (3)

I_Al-thamary
I_Al-thamary

Reputation: 4013

The maximum-scale. perverted from zooming. 

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

Also if it is not working add to the style sheet css the following:

@-ms-viewport{ width: device-width; }

So, read this to know how to deal with it and to understand it more:

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Upvotes: 1

user9985211
user9985211

Reputation: 230

You need to make the meta tag get the width from the phone, not the computer. Please try this: <meta name="viewport" content="width=device-width, initial-scale=1"> For more reference, see here: CSS-Tricks: Responsive Meta Tag

Upvotes: -2

Shahar
Shahar

Reputation: 2191

The meta tag that you want to change is the viewport. When the metateg set to user-scalable=no then the user is unable to scale the device like so: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

To change it with javascript check out the following code:

// Holds the scale state. doesn't have to be in a global var,
// just for the clarity of the explanation
let allowScale = true;

// Just to show the state
// You do not need this function
function showViewportState() {
    const viewportState =  document.getElementById('viewport-state');
    viewportState.innerHTML = allowScale? 'Can Scale': 'Can not Scale';
}
showViewportState();

const btn = document.getElementById('toggle');
btn.addEventListener('click', toggleViewport);

// The toggle view port updates the
function toggleViewport(){
    let viewport = document.querySelector("meta[name=viewport]");
    if (!viewport){
        // in case there is no view port meta tag creates one and add it to the head
        viewport=document.createElement('meta');
        viewport.name = "viewport";
        document.getElementsByTagName('head')[0].appendChild(viewport);
    }
    
    const content = allowScale?
        'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no':'width=device-width, initial-scale=1.0, user-scalable=yes';
    // this is where the magic happens by changing the vewport meta tag
    viewport.setAttribute('content', content);
    allowScale = !allowScale;
    showViewportState();
}
        body{
            margin: 0;
            padding: 0;
        }
        .main{
            display: flex;
            min-height: 100vh;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        #viewport-state{
            margin-top: 20px;
            font-weight: bold;
            display: block;
        }
<!-- Just an example -->
<div class="main">
    <div class="wrapper">
        Try to toggle on mobile, and then zoom in<br>
        <button id="toggle">Toggle Scale</button>
        <div id="viewport-state"></div>
    </div>
</div>

Upvotes: 7

Related Questions