Могу ли я изменить метатег viewport в мобильном сафари на лету? - PullRequest
Новая
       37

Могу ли я изменить метатег viewport в мобильном сафари на лету?

91 голосов
/ 28 августа 2010

У меня есть приложение AJAX, созданное для мобильного браузера Safari, которое должно отображать различные типы контента.

Для какого-то контента мне нужно user-scalable=1, а для другого - user-scalable=0.

Есть ли способ изменить значение атрибута содержимого без обновления страницы? 

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

Ответы [ 3 ]

139 голосов
/ 04 ноября 2010

Я понимаю, что это немного старо, но, да, это можно сделать.Некоторый javascript для начала: 

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

Просто измените нужные детали, и Mobile Safari выполнит новые настройки.

Обновление:

Если у вас еще нет мета-тега viewport в источнике, вы можете добавить его непосредственно с помощью чего-то вроде этого: 

var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);

Или, если вы используете jQuery: 

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');
7 голосов
/ 05 мая 2011

в вашем <head>

<meta id="viewport"
      name="viewport"
      content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />

где-то в вашем javascript 

document.getElementById("viewport").setAttribute("content",
      "initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");

... но удачи в том, чтобы настроить его для своего устройства, возиться часами ... а меня все еще нет!

источник

4 голосов
/ 27 апреля 2016

На этот вопрос ответили по большей части, но я буду расширяться ...

Шаг 1

Моей целью было включить масштабирование в определенные моменты и отключить его в другие. 

// enable pinch zoom
var $viewport = $('head meta[name="viewport"]');    
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=4');

// ...later...

// disable pinch zoom
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');

Шаг 2

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

Это решение для взлома, но переключение непрозрачности тела сработало. Я уверен, что есть другие способы сделать это, но вот что сработало для меня. 

// after updating viewport tag, force the page to pick up changes           
document.body.style.opacity = .9999;
setTimeout(function(){
    document.body.style.opacity = 1;
}, 1);

Шаг 3

Моя проблема была в основном решена на данный момент, но не совсем. Мне нужно было знать текущий уровень масштабирования страницы, чтобы я мог изменить размеры некоторых элементов, чтобы они поместились на странице (подумайте о маркерах на карте). 

// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;

Надеюсь, это кому-нибудь поможет. Я потратил несколько часов, стуча мышью, прежде чем нашел решение.

...