How to change the contents of the viewport using JavaScript?

Hi all. Tell me how you can make a button which will change the content of a viewport tag. Initially, width=device-width, initial-scale=1 change to width=1024 . Somehow to keep it in the cache

To disable the responsive layout.
March 19th 20 at 08:50
2 answers
March 19th 20 at 08:52
Solution
<a class="selector">tyk</a>
the <script>
//jquery
$('.selector').click(function(e){
e.preventDefault();
$('[name="viewport"]').attr('content','width=1024');
})
</script>
this option will only work until the page is reloaded ? - Ivory commented on March 19th 20 at 08:55
Yes - heaven.Casper21 commented on March 19th 20 at 08:58
@heaven.Casper21, there are options to save in the cache ? - Ivory commented on March 19th 20 at 09:01
@Ivory, write to localstorage when the page loads check. - torey_Gleason commented on March 19th 20 at 09:04
@Ivory, through localstorage, but you can save to cookies, that function, read and write
function setCookie(name, value, options) {
 options = options || {};

 var expires = options.expires;

 if (typeof expires == "number" && expires) {
 var d = new Date();
 d.setTime(d.getTime() + expires * 1000);
 expires = options.expires = d;
}
 if (expires && expires.toUTCString) {
 options.expires = expires.toUTCString();
}

 value = encodeURIComponent(value);

 var updatedCookie = name + "=" + value;

 for (var propName in options) {
 updatedCookie += "; " + propName;
 var propValue = options[propName];
 if (propValue !== true) {
 updatedCookie += "=" + propValue;
}
}

 document.cookie = updatedCookie;
}
function getCookie(name) {
 var matches = document.cookie.match(new RegExp(
 "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
 return matches ? decodeURIComponent(matches[1]) : undefined;
}

and check either with js, or just before the output-side php

ie get
<a class="selector">tyk</a>
the <script>
//jquery
$('.selector').click(function(e){
e.preventDefault();
 var adaptiveDisable = parseInt(getCookie('adaptiveDisable'));
 //the same button you can enable or disable adaptive
 if(!adaptiveDisable) {
$('[name="viewport"]').attr('content','width=1024');
 setCookie('adaptiveDisable', 1);
 } else {
 $('[name="viewport"]').attr('content','width=device-width, initial-scale=1');
 setCookie('adaptiveDisable', 0);
 } 

});

//check for the js side, but it is better to do the validation on the php side
$(document).ready(function(){
 var adaptiveDisable = parseInt(getCookie('adaptiveDisable'));
 if(adaptiveDisable) {
$('[name="viewport"]').attr('content','width=1024');
}
})
</script>
- heaven.Casper21 commented on March 19th 20 at 09:07
AFAIK it won't work. Have meta tags you can not change the attributes, just remove the tag and add a new one. - Megane commented on March 19th 20 at 09:10
@Megane, why is it then that my version of works? - heaven.Casper21 commented on March 19th 20 at 09:13
@heaven.Casper21, I wrote AFAIK =)
Has memory =) - Megane commented on March 19th 20 at 09:16
March 19th 20 at 08:54
Solution
That's really works:
(() => {
 const head = document.head;
 const meta = document.querySelector('meta[name="viewport"]');
 const content = meta.getAttribute('content');
 const newMeta = document.createElement('meta');

 newMeta.setAttribute('name', 'viewport');
 newMeta.setAttribute('content', content.replace(/width=([^,]+),/i, 'width=1024'));

head.removeChild(meta);
head.appendChild(newMeta);
})()

Find more questions by tags JavaScript