Czy mogę zmienić metatag widocznego obszaru w mobilnym safari w locie?

Mam aplikację ajax zbudowaną dla mobilnego Safari, która musi wyświetlać różne typy treści. Niektóre treści potrzebuję skalowalne przez użytkownika = 1 inna zawartość potrzebna do skalowania przez użytkownika = 0. Czy istnieje sposób aktualizacji tej aktualizacji bez odświeżania strony?Czy mogę zmienić metatag widocznego obszaru w mobilnym safari w locie?

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

Źródło

2010-08-27 Pepper

133

Zdaję sobie sprawę, że jest to trochę stary, ale tak to można zrobić. Niektóre 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');

Wystarczy zmienić potrzebne części i Mobile Safari będzie szanować nowe ustawienia.

Aktualizacja:

Jeżeli nie masz jeszcze meta tag rzutni w źródle, można dołączyć go bezpośrednio z czymś takim:

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">');

Źródło

2010-11-04 08:27:47 markquezada

Nice!Niestety, nie mogę sprawić, żeby działało. Moja sytuacja wygląda nieco inaczej: pracuję z witryną o szerokości 980 pikseli. Treść idzie prosto do krawędzi projektu, więc na iPadzie wygląda na niezręczną. Myślałem, że ustawię okienko ekranu na szerokość 1020 pikseli, aby pozwolić na margines 20 pikseli po każdej stronie ... ale bez powodzenia: 'viewport = document.querySelector (" meta [name = viewport] "); viewport.setAttribute ("treść", "szerokość = 1020"); ' (Tylko w pewnym kontekście: umieszczam to w nieco zamkniętej instancji Drupala ... więc nie mam bezpośredniego dostępu do obszar głowy i trzeba użyć Javascript) – Sam

Grumble narzekać ... Myślę, że wiem, dlaczego to nie działa dla mnie. Powyższy fragment przepisałby wartość szerokości meta okna podglądu. Ta meta jeszcze nie istnieje ... nie można jej zmienić, jeśli jej tam nie ma, prawda? W jaki sposób mogę dodać, że meta z Javascriptem? (Cholera to zablokowana instancja Drupala! Myślę, że jestem spieprzona!) – Sam

To powinno być łatwe. Po prostu zapisz to bezpośrednio. Jeśli używasz jQuery, będzie to coś takiego: '$ ('head') .endend ('"); ' lub bez jQuery: ' document.getElementsByTagName ('head') [0] .appendChild (...); ' – markquezada

w swoim <head>

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

gdzieś w javascript

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

... ale powodzenia z szczypanie go na swoim urządzeniu, błahy godzinami ... i jestem nadal nie istnieje!

source

Źródło

2011-05-05 18:58:50 sonjz

to zostało odebrane w przeważającej części, ale będę rozszerzać ...

Krok 1

Moim celem było umożliwienie powiększenia w pewnych porach i wyłączyć 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 rzutnia będzie aktualizować, ale pinch zoom był nadal aktywny !! Musiałem znaleźć sposób, aby uzyskać stronę, aby odebrać zmiany ...

To rozwiązanie hakerskie, ale przełączanie nieprzezroczystości ciała załatwiło sprawę. Jestem pewien, że są inne sposoby, aby to osiągnąć, ale oto, co sprawdziło się u 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ł rozwiązany przede wszystkim w tym momencie, ale nie całkiem. Potrzebowałem znać aktualny poziom powiększenia strony, aby zmienić rozmiar niektórych elementów, aby zmieściły się na stronie (myślę o znacznikach mapy).

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

Mam nadzieję, że to pomoże komuś. Spędziłem kilka godzin waląc myszką, zanim znalazłem rozwiązanie.

Źródło

2016-04-27 15:43:31

To uratowało mi życie, ale mam z tym mały problem: zakładając, że wyświetlasz obraz w nakładce div w 100% i powiększasz go na urządzeniu mobilnym, będziesz powiększać za pomocą natywnej implementacji powiększenia przeglądarki, która zwykle po prostu skaluje widoczny obszar bez ponownego renderowania oryginalnego pliku. Z drugiej strony, jeśli usunę "szerokość = szerokość urządzenia" dla stanu niedostępności powiększenia, spowoduje to poprawienie obrazu podczas powiększania, ale utracę ostatnią pozycję strony, gdy zamknięcie 100% zostanie zamknięte ... –

Czy mogę zmienić metatag widocznego obszaru w mobilnym safari w locie?

Odpowiedz

Powiązane problemy