Jak uruchomić pinch zoom na mobile?

Hej,

Mam stronę https://kursy-ratownik.learnworlds.com/

Strona stworzona jest przez kreator, do którego mogę dodawać CSS, ewentualnie JS. Problem jest następujący, na rozdzielczościach mobile nie mam możliwości użycia pinch zoom'a przez mobile. W przypadku, gdy w przeglądarce ustawię "wersja na komputer" pinch zoom działa poprawnie.
Próbowałem już podmieniać tagi meta viewport za pomoca JS'a, próbowałem CSS'em ustawić touch-action, natomiast żadne z tych rozwiązań nie zadziałało poprawnie.

Macie pomysły, co może być powodem nie działającego zoom'a na mobile?

width=device-width, initial-scale=1, maximum-scale=1

no masz jak byk maximum-scale=1 więc jakby nie wiem czego się spodziewasz. Pokaż w jaki sposób próbowałeś to podmieniać. Czy tej strony stworzonej przez kreator nie możesz normalnie edytować ewentualnie wynieść jej w całości w jakieś normalne miejsce gdzie będziesz mógł edytorwać HTML?

Mjuzik napisał(a):

Próbowałem już podmieniać tagi meta viewport za pomoca JS'a

W jaki sposób to robisz? Może się wcale nie zmieniły?

Strona stworzona jest przez kreator

Jaki kreator? Jakieś narzędzie no-code? A nie ma w nim jakichś opcji do ustawiania tego? Albo edycji bezpośredniej HTMLa? Albo eksportu do HTMLa?

Wydaje mi się, że <meta name="viewport" ...> nie może być zmienione przez JavaScript, bo przeglądarka nie zaktualizuje nowej wartości. Ładuje się ono raz, bezpośrednio przed wyświetleniem strony.

Dziękuję za odpowiedzi

obscurity napisał(a):

width=device-width, initial-scale=1, maximum-scale=1

no masz jak byk maximum-scale=1 więc jakby nie wiem czego się spodziewasz. Pokaż w jaki sposób próbowałeś to podmieniać.

Próbowałem podmieniać również tą wartość razem z user-scalable=yes za pomocą JS'a, bez efektu.

Czy tej strony stworzonej przez kreator nie możesz normalnie edytować ewentualnie wynieść jej w całości w jakieś normalne miejsce gdzie będziesz mógł edytorwać HTML?

Niestety nie, nie mam dostępu do źródła. Mogę dodawać kod CSS lub JS.

LukeJL napisał(a):

Mjuzik napisał(a):

Próbowałem już podmieniać tagi meta viewport za pomoca JS'a

W jaki sposób to robisz? Może się wcale nie zmieniły?

Sprawdzałem, wartości były podmienione.

Strona stworzona jest przez kreator

Jaki kreator? Jakieś narzędzie no-code? A nie ma w nim jakichś opcji do ustawiania tego? Albo edycji bezpośredniej HTMLa? Albo eksportu do HTMLa?

Nie ma możliwości, pisałem już do ich supportu. Eksport/edycja HTML nie jest dostępna. Kreator to https://www.learnworlds.com/

Xarviel napisał(a):

Wydaje mi się, że <meta name="viewport" ...> nie może być zmienione przez JavaScript, bo przeglądarka nie zaktualizuje nowej wartości. Ładuje się ono raz, bezpośrednio przed wyświetleniem strony.

Domyślam się, że właśnie dlatego to nie działa.

Generalnie, nie tyle zależy mi zoomie całej strony, co na zoomie konkretnego elementu czyli zdjęcia, które zawarte jest w pytaniach w quiz. Jest możliwość w kreatorze, aby dodatkowo wyświetlać dane zdjęcie w formie popup na całą szerokość urządzenia, ale nadal bez możliwości zoom. Zdjęcia zawierają wiele szczegółów, które na mobile mogą zostać nie zauważone.

maximum-scale=1 nie blokuje eventów związanych z dotykiem (touchstart, touchmove, touchend), więc można skorzystać z transform do przybliżenia obrazka

image.style.transform = `scale(1.5) translate(${translateX}px, ${translateY}px)`; // gdzie translateX, translateY są obliczanie na podstawie wyżej wymienionych eventów

o ile cms pozwoli na wprowadzenie odpowiednich zmian.

Udało się, jednak za pomocą JS

  var viewportMeta = document.querySelector('meta[name="viewport"]');

  // Sprawdź, czy meta tag istnieje
  if (viewportMeta) {
      // Zaktualizuj atrybut content
      viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1, user-scalable=yes');
  }

Dlaczego nie działało to wcześniej? Generalnie jak zwykle pomógł w debugowaniu pomógł zwykły console.log. Okazało się, że ten JS, nie był dodawany do każdej strony, na stronie kursu mało tego cały quiz jest w formie iframe, który dodatkowo wprowadzał mnie w błąd, razem z całą strukturą HTML. Dodatkowo modyfikowanie kodu JS nie zawsze zadziało, ponieważ po rozpoczęciu kursu content quizu jest prawdopodobnie zapisywany per user. Zauważyłem to dopiero, gdy zmieniłem treść odpowiedzi i ta treść w quiz nie była zaktualizowana od strony użytkownika.

Bardzo dziękuję za odpowiedzi. Temat rozwiązany

Xarviel napisał(a):

Wydaje mi się, że <meta name="viewport" ...> nie może być zmienione przez JavaScript, bo przeglądarka nie zaktualizuje nowej wartości. Ładuje się ono raz, bezpośrednio przed wyświetleniem strony.

Co stoi na przeszkodzie?

  window.addEventListener ( 'load', ()=>{
    viewport = document.querySelector('meta[name=viewport]');
    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
  } );

Mjuzik napisał(a):

Próbowałem podmieniać również tą wartość razem z user-scalable=yes za pomocą JS'a, bez efektu.

Bo musisz poczekać aż strona się załaduje.