У меня есть приложение 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;" />
Я понимаю, что это немного старо, но да, это можно сделать. Некоторые 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 будет уважать новые настройки.
Update:
Если у вас еще нет тега meta 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">');
в <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;");
... но удачи в том, чтобы настроить его для вашего устройства, часами играя... и я все еще не там!
Об этом ответили по большей части, но я буду расширяться...
Шаг 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
Тег viewport будет обновляться, но увеличение масштаба было еще активным! Мне нужно было найти способ заставить страницу забрать изменения...
Это решение для взлома, но переключение непрозрачности тела сделало трюк. Я уверен, что есть другие способы сделать это, но вот что сработало для меня.
// 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;
Надеюсь, это поможет кому-то. Я провел несколько часов, ударяя мышью, прежде чем найти решение.