Che cosa fa l'attributo meta viewport riduci per adattarsi?

143

Ho problemi a trovare la documentazione per questo. Safari è specifico?

Si è verificato un recente bug in iOS 9 ( qui ), la soluzione a cui si sta aggiungendo shrink-to-fit=noal meta viewport.

Cosa fa questo codice?

html  safari  webkit  ios9  viewport 
— 755
fonte

Risposte:

193

È specifico di Safari, almeno al momento della stesura di questo documento, introdotto in Safari 9.0. Da "Novità di Safari?" documentazione per Safari 9.0 :

Modifiche alla vista

I metatag "width=device-width"della finestra che utilizzano causano il ridimensionamento della pagina per adattarsi al contenuto che trabocca i limiti della finestra. Puoi ignorare questo comportamento aggiungendo "shrink-to-fit=no"al tuo meta tag come mostrato di seguito. Il valore aggiunto impedirà al ridimensionamento della pagina di adattarsi alla finestra.

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

In breve, aggiungendo questo al meta tag viewport si ripristina il comportamento pre-Safari 9.0.

Esempio

Ecco un esempio visivo funzionante che mostra la differenza al caricamento della pagina nelle due configurazioni.

La sezione rossa è la larghezza della finestra e la sezione blu è posizionata all'esterno della finestra iniziale (ad es left: 100vw.). Nota come nel primo esempio la pagina viene ingrandita per adattarsi quando shrink-to-fit=noviene omessa (mostrando così il contenuto fuori dal riquadro di visualizzazione) e il contenuto blu rimane fuori dallo schermo nel secondo esempio.

Il codice per questo esempio è disponibile all'indirizzo https://codepen.io/davidjb/pen/ENGqpv .

Senza restringimento per adattamento specificato

Senza restringimento per adattarsi = no

Con riduzione per adattamento = no

Con riduzione per adattamento = no

— davidjb
fonte
2
Mi dispiace, ma ancora non capisco cosa fa quel codice. Puoi spiegare in modo diverso? Grazie!
— Daniel Springer,
3
@Dani Per impostazione predefinita, Safari ingrandirà una pagina per adattarla a qualsiasi contenuto che trabocca dalla finestra (il primo esempio mostra l'area blu come visibile; è traboccante). La specifica shrink-to-fit=noimpedisce questo comportamento, lasciando da solo il livello di zoom e lasciando fuori dallo schermo il contenuto traboccante. Prova l'esempio Codepen sul tuo iDevice (o simulatore iOS) e prova a modificare l'impostazione. Forse vedere il cambiamento in modo interattivo aiuterà.
— davidjb,
2
Ah capisco Ma perché qualcuno dovrebbe voler nascondere parte del proprio contenuto su schermi più piccoli?
— Daniel Springer,
7
@Dani Vari motivi, ma esempi rapidi sono cursori / caroselli che posizionano il contenuto al di fuori del viewport o contenuti di grandi dimensioni non rispondenti (ad esempio immagini / tabelle) che altrimenti traboccerebbero e renderebbero il resto della pagina diventare minuscolo con l'impostazione predefinita shrink-to-fitcomportamento. Con shrink-to-fit=no, la pagina rimane alle dimensioni previste, lasciando che il contenuto trabocchi sulla finestra. Un utente può (in genere) continuare a scorrere o rimpicciolire per visualizzare il contenuto di overflow ma la finestra iniziale corrisponde alla dimensione del dispositivo.
— davidjb,
2
@davidjb Penso che sia stato corretto con l'ultimo iOS 11. Non riesco a riprodurre questo errore.
— Zeel Shah,
12

Come statistiche sull'utilizzo di iOS, ciò indica che l'utilizzo di iOS 9.0-9.2.x è attualmente allo 0.17%. Se questi numeri sono veramente indicativi dell'uso globale di queste versioni, è ancora più probabile che sia sicuro rimuovere il restringimento per adattarlo dal metatag del viewport.

Dopo il 9.2.x. IOS rimuove questo controllo tag dal suo 'browser.

Puoi controllare questa pagina https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html

— GGGin
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.