Динамически менять viewport для выбора мобильной/полной версии

#html #мобильная_разработка #viewport

Делаю мобильную версию. Есть проблема зума. На мобильной версии есть тег:




По кнопке перехода пишется сессия и вместо этого тега пишется другой: 




Проблема в том что браузер "помнит" ширину в 320px и применяет его, initial-scale=1
при этом игнорируется. 

Если указать user-scalable=no, то масштабируется всё правильно, но увеличить пользователь
уже не может. Такой же эффект если поставить minimum-scale=1,maximum-scale=1. А надо
чтобы пользователь мог увеличить части страницы.

Как этого добиться?
    

Ответы

Ответ 1

Попробуйте добавлять этот тег динамически при загрузке страницы

var viewPort = document.createElement('meta');
viewPort.name = "viewport";
viewPort.content = "width=1024";
document.getElementsByTagName('head')[0].appendChild(viewPort);


Либо менять его же:

document.querySelector("meta[name=viewport]")
    .setAttribute("content", "width=1024");


Если это не поможет, то может быть так что в вашем браузере в принципе нельзя этого
сделать - проблема известная.


Ответ 2

Можно попробовать менять содержимое мета-тега уже после того, как зум стал таким,
каким нужно.



window.onload = function() {
  setTimeout(function() {
    var viewport = document.getElementById('desktop');
    viewport.setAttribute('content', 'width=1024');
  }, 500);
};