immagine div pinch-stradale Aggiungendo a una finestra non scalabile su dispositivi mobili

Si consideri il seguente meta tag viewport:immagine div pinch-stradale Aggiungendo a una finestra non scalabile su dispositivi mobili

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />

Il contenuto della pagina non è scalabile e mobile reattivo. A volte, ho bisogno di sovrapporre una grande immagine su di essa e consentire all'utente di pizzicare-ingrandire quell'immagine.

#overlay_div { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-color: #dddddd; 
    z-index: 550000; 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

<div id="overlay_div"> 
    <img src="largeimage.jpg" width="100%"> 
</div>

Attualmente, sono a conoscenza di due possibili opzioni:

modificare a livello di meta viewport per consentire il ridimensionamento utente (possibili implicazioni cross-browser, fa sì che anche i contenuti al di sotto di scala che non è auspicabile)
Utilizzare hammer.js per gestire manualmente l'evento di pizzicamento e ridimensionare il div/immagine di conseguenza (le implicazioni di compatibilità possibili sembrano molto complesse).

Qualcuno conosce il modo corretto per farlo, soprattutto per la compatibilità tra browser? Spero che possa esserci una semplice soluzione CSS.

Grazie

fonte

2014-06-27 wayofthefuture

Spero che nessuno che indossa gli occhiali abbia mai provato a usare questa pagina, perché se non possono scalare ... non saranno in grado di leggerlo. Ecco perché non è una proprietà raccomandata. –

millikenchemical.com su un dispositivo mobile non è scalabile, ma può essere letto. Dalla mia comprensione, questo è il posto dove si dirige il web. Contenuti sensibili per i dispositivi mobili. Grazie. – wayofthefuture

In generale vorrei andare con una versione stradale come @Paulie_D raccomandata; in modo da utilizzare questo su tutte le pagine:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ecco Google´s recommendation.

Se davvero avete altra scelta, mi sento di raccomandare per aprire l'immagine nello stesso browser scheda/finestra con il tag meta mostrato sopra e un link posteriore per la navigazione. È quindi disponibile lo zoom pinch nativo .

Questo è un esempio di tale applicazione (è necessario un agente utente mobile): https://m.notebooksbilliger.de/notebooks/hp+compaq+15+h024sg

fonte

2014-06-30 12:57:33

Hmmmm ... È una mappa sotto, ecco perché ho il ridimensionamento utente disabilitato. Quando pizzichi la mappa, zooma. Forse potrei abilitare il ridimensionamento usando il meta tag della tua vista e provare a rimuovere gli eventi che avrebbero causato la scalatura della mappa in scala ... Non so. Grazie – wayofthefuture

Che tipo di mappa è? Una mappa di google? –

openlayers con un livello di mappa google ... Ho provato hammer.js ma ho problemi con i telefoni Windows. Penso che forse l'opzione migliore a questo punto sia quella di reindirizzare a una nuova pagina, e usare window.location.back() per tornare velocemente. – wayofthefuture

io non sono sicuro che sia il tuo caso, ma di solito preferisco fare immagine un link (a) immagine originale. I browser mobili possono gestire questa situazione aprendo l'immagine nella modalità full screen. Quindi l'utente può fare quello che vuole con l'immagine o può tornare alla pagina principale.

fonte

2014-07-05 15:32:07 spinus

Puoi dare qualche dettaglio su questa 'modalità a schermo intero 'di cui parli? È una cosa javascript o css? – MarksCode

@MarksCode, sto parlando di un'immagine di apertura solo in un browser senza alcun codice addons/js. La maggior parte dei browser, in particolare i cellulari, è in grado di gestirli molto bene. – spinus

ah ..troppo male pizzico e zoom non funziona per questo :( – MarksCode

immagine div pinch-stradale Aggiungendo a una finestra non scalabile su dispositivi mobili

risposta

Problemi correlati