Как изменить содержимое viewport через JavaScript?

Question

[starspro]

Всем привет. Подскажите как можно сделать кнопку которая будет изменять содержимое тега viewport. Изначально width=device-width, initial-scale=1 изменять на width=1024 . Каким то образом сохранять это в кеше

С целью отключать адаптивную верстку.

Answer 1

[2cha.headz]

<a class="selector">тык</a>
<script>
//jquery
$('.selector').click(function(e){
    e.preventDefault();
    $('[name="viewport"]').attr('content','width=1024');
})
</script>

Comments

[starspro]

этот вариант будет работать только до перезагрузки страницы ?

[2cha.headz]

да

[starspro]

2cha, есть варианты с сохранением в кеше ?

[Stalker_RED]

starspro, записывай в localstorage, при загрузке страницы проверяй.

[2cha.headz]

starspro, можно через localstorage, а можно сохранить в куки, вот функции, чтения и записи

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;
}

и проверять либо с помощью js, либо перед самым выводом на стороне php

т.е. получим

<a class="selector">тык</a>
<script>
//jquery
$('.selector').click(function(e){
    e.preventDefault();
    var adaptiveDisable = parseInt(getCookie('adaptiveDisable'));
    //одной и той же кнопкой включаем или отключаем адаптивку
    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);
    }    
    
});

//проверка на стороне js, но лучше делать проверку на стороне php
$(document).ready(function(){
    var adaptiveDisable = parseInt(getCookie('adaptiveDisable'));
    if(adaptiveDisable) {
        $('[name="viewport"]').attr('content','width=1024');
    }
})
</script>

[Алексей Ярков]

ЕМНИП это вообще не будет работать. У мета тегов нельзя менять атрибуты, только удалять тег и добавлять новый.

[2cha.headz]

Алексей Ярков, ну а почему же тогда мой вариант работает?

[Алексей Ярков]

2cha, я же написал ЕМНИП =)
Таки изменяет память =)

Answer 2

[Алексей Ярков]

Вот так точно работает:

(() => {
    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);
})()