Ripristina scala / larghezza / zoom di Safari su iPhone utilizzando JavaScript / modifica orientamento

Question

Sto visualizzando contenuti diversi a seconda di come l'utente sta trattenendo il proprio telefono utilizzando la chiamata di cambio di orientamento nel tag body. Funziona benissimo: nascondo un div mentre ne rendo visibile l'altro.

Il div in modalità verticale sembra fantastico al primo caricamento. Lo uso per ottenere la scala / lo zoom corretti:

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

Anche se il contenuto è in modalità verticale, la larghezza è corretta e l'utente può scorrere verso il basso. Anche il display in modalità orizzontale è perfetto. Tuttavia, se il contenuto in modalità orizzontale richiede all'utente lo scorrimento verso il basso, quindi quando l'utente torna alla modalità verticale, lo schermo è & Quot; ingrandito & Quot; per così dire. Ciò accade indipendentemente dal fatto che l'utente abbia fatto scorrere verso il basso o meno in modalità orizzontale.

Ho provato molte cose diverse per cercare di ottenere correttamente la scala / zoom / larghezza dello schermo, ma senza fortuna. C'è un modo per farlo?

Grazie in anticipo!

Answer 1

Ecco cosa uso per gestire lo zoom sulle mie query multimediali:

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

La scala massima è la cosa che l'ha venduta per me. Significa che il passaggio da ritratto a paesaggio su un iPhone è davvero fluido senza problemi di zoom ...

Answer 2

Il " rispondi " accettato sopra non è in realtà una risposta, in quanto impedire lo zoom di qualsiasi tipo è tanto grave quanto chiedere a un utente di IE di passare a un altro browser. È terribile per l'accessibilità. Desideri che il tuo progetto non esegua zoom funky, cosa che Apple ha ritenuto ideale quando ha cambiato l'orientamento della vista, ma stai lasciando gli utenti disabili nella polvere. Altamente sconsigliato.

Prova a utilizzare le query multimediali o un hook js (screen.width, ecc.) per adattare automaticamente il tuo design al cambio di orientamento. Ecco perché questi attributi ci sono esposti come sviluppatori.

Answer 3

Ho avuto dei problemi con i livelli di zoom che cambiano da orizzontale a verticale, quando il contenuto era più grande della finestra. Impostando & Quot; minimum-scale = 1.0 & Quot ;, risolto questo per me.

Answer 4

Questo non funzionerà se si esegue un'app Web in Safari, ma penso che funzionerà se si utilizza un UIWebView all'interno della propria app.

Non l'ho mai provato, ma c'è un modo semplice per far parlare il tuo javascript con il lato obiettivo-c del codice a quel punto avresti accesso a cose come lo zoom della vista web.

Answer 5

Penso di aver avuto anche questo problema. Prova a mettere un & Quot; maximum-scale = 1.0 & Quot; (e forse un " minumum-scale = 1.0 " se ti va) nel tag viewport. Ciò presuppone che non desideri che l'utente sia in grado di ridimensionare (cosa che io non faccio)

Answer 6

L'uso dei meta tag per questo non funziona. Ho provato tutte le combinazioni di meta tag e orientationchange e gesturechange possibili eventi, ho provato i timeout e tutti i tipi di fantasia javascript, quindi ho trovato questo: https://github.com/scottjehl/iOS-Orientationchange-Fix

tramite questa domanda correlata: Come reimpostare la scala / zoom di un'app Web su una modifica dell'orientamento su iPhone?

In quel post, Andrew Ashbacher ha pubblicato un link al codice scritto da Scott Jehl:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

Questa è una soluzione ben inserita in un IIFE quindi non devi preoccuparti di problemi di spazio dei nomi.

Inseriscilo nel tuo script (non in document.ready() se stai usando jQuery) e viola!

Tutto ciò che fa è disabilitare lo zoom su devicemotion eventi che indicano che <=> è imminente. È la migliore soluzione che ho visto perché funziona davvero e non disabilita lo zoom.

EDIT: questo approccio non è sempre affidabile, specialmente quando si tiene l'iPad ad angolo. inoltre, non credo che questo evento sia disponibile per gli ipad di gen 1

Answer 7

È possibile impostare la proprietà user-scalable nell'attributo content. Prova questo:

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

Da questa risposta :

  

Ma se assegni User-scalable = no significa che il tuo sito web non consente di ingrandire o rimpicciolire.