У мене є додаток 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 поважатиме нові налаштування.
Оновлення:
Якщо у вас вже немає тегу метапогляду в джерелі, ви можете додати його безпосередньо таким чином:
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').append('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">'); або, без jQuery:document.getElementsByTagName('head')[0].appendChild( ... );
viewport.setAttribute('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
Тег вікна перегляду буде оновлено, але прищипне масштабування все ще активне !! Мені довелося знайти спосіб отримати сторінку, щоб отримати зміни ...
Це хакерське рішення, але зміна непрозорості тіла зробила свою справу. Я впевнений, що є й інші способи досягти цього, але ось що для мене спрацювало.
// 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;Я сподіваюся, що це комусь допоможе. Я кілька годин стукав мишею, перш ніж знайти рішення.
viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1020');(Просто для певного контексту: я ставлю це в дещо замкненому екземплярі Drupal ... тому я не маю прямого доступу до області голови і мені потрібно використовувати Javascript)