Mam aplikację AJAX stworzoną dla mobilnej przeglądarki Safari, która musi wyświetlać różne rodzaje treści.
Do niektórych treści potrzebuję, user-scalable=1a do innych potrzebuję user-scalable=0.
Czy istnieje sposób na zmodyfikowanie wartości atrybutu content bez odświeżania strony?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />Odpowiedzi:
Zdaję sobie sprawę, że to trochę stare, ale tak, można to zrobić. Trochę javascript na początek:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');Po prostu zmień potrzebne części, a Mobile Safari zastosuje nowe ustawienia.
Aktualizacja:
Jeśli nie masz jeszcze metatagu viewport w źródle, możesz dodać go bezpośrednio za pomocą czegoś takiego:
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);Lub jeśli używasz 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;">'); lub bez jQuery:document.getElementsByTagName('head')[0].appendChild( ... );
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
w Twoim <head>
<meta id="viewport"
name="viewport"
content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />gdzieś w twoim javascript
document.getElementById("viewport").setAttribute("content",
"initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");... ale powodzenia w dostosowywaniu go do swojego urządzenia, majstrowaniu godzinami ... i nadal mnie tam nie ma!
W większości odpowiedzi na to pytanie, ale rozszerzę ...
Krok 1
Moim celem było włączenie zoomu w określonych momentach i wyłączenie go w innych.
// 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');Krok 2
Znacznik rzutni aktualizował się, ale powiększanie przez szczypanie było nadal aktywne! Musiałem znaleźć sposób, aby strona odebrała zmiany ...
To hackowe rozwiązanie, ale przełączenie krycia ciała załatwiło sprawę. Jestem pewien, że istnieją inne sposoby, aby to osiągnąć, ale oto, co zadziałało dla mnie.
// after updating viewport tag, force the page to pick up changes
document.body.style.opacity = .9999;
setTimeout(function(){
document.body.style.opacity = 1;
}, 1);Krok 3
Mój problem został w większości rozwiązany w tym momencie, ale nie do końca. Musiałem znać aktualny poziom powiększenia strony, aby móc zmienić rozmiar niektórych elementów, aby zmieściły się na stronie (pomyśl o znacznikach mapy).
// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;Mam nadzieję, że to komuś pomoże. Spędziłem kilka godzin uderzając myszą, zanim znalazłem rozwiązanie.
viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1020');(tylko w pewnym kontekście: umieszczam to w nieco zablokowanej instancji Drupala ... więc nie mam bezpośredniego dostępu do obszaru głowy i muszę używać Javascript)