Co robi meta atrybut zmniejszania, aby dopasować rzutnię?

143

Mam problem ze znalezieniem dokumentacji na ten temat. Czy jest to specyficzne dla Safari?

Wystąpił ostatnio błąd w iOS 9 ( tutaj ), którego rozwiązaniem jest dodanie shrink-to-fit=nodo widoku meta.

Co robi ten kod?

html safari webkit ios9 viewport 755
źródło

Odpowiedzi:

193

Jest to specyficzne dla Safari, przynajmniej w momencie pisania, i zostało wprowadzone w Safari 9.0. W sekcji „Co nowego w Safari?” dokumentacja dla Safari 9.0 :

Zmiany w rzutni

Używanie metatagów rzutni "width=device-width"powoduje przeskalowanie strony w celu dopasowania do zawartości, która przepełnia granice rzutni. Możesz zmienić to zachowanie, dodając "shrink-to-fit=no"do swojego metatagu, jak pokazano poniżej. Wartość dodana zapobiegnie skalowaniu strony w celu dopasowania do widocznego obszaru.

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

Krótko mówiąc, dodanie tego do metatagu viewport przywraca zachowanie sprzed przeglądarki Safari 9.0.

Przykład

Oto praktyczny przykład wizualny, który pokazuje różnicę po załadowaniu strony w dwóch konfiguracjach.

Czerwona sekcja to szerokość rzutni, a niebieska sekcja jest umieszczona poza początkową rzutnią (np left: 100vw.). Zwróć uwagę, że w pierwszym przykładzie strona jest powiększana, aby dopasować ją, gdy shrink-to-fit=nojest pominięta (w ten sposób pokazuje zawartość poza widocznym obszarem), a niebieska zawartość pozostaje poza ekranem w drugim przykładzie.

Kod tego przykładu można znaleźć pod adresem https://codepen.io/davidjb/pen/ENGqpv .

Bez określonego dopasowania

Bez skurczu = nie

Z Shrink-to-Fit = nie

Z Shrink-to-Fit = nie

davidjb
źródło
2
Przepraszam, ale nadal nie rozumiem, co robi ten kod. Czy możesz wyjaśnić w inny sposób? Dzięki!
Daniel Springer
3
@Dani Domyślnie Safari pomniejszy stronę, aby dopasować ją do zawartości, która przepełnia widoczny obszar (pierwszy przykład pokazuje niebieski obszar jako widoczny; to jest przepełnione). Określenie shrink-to-fit=nozapobiega temu zachowaniu, pozostawiając sam poziom powiększenia i pozostawiając przepełnioną zawartość poza ekranem. Wypróbuj przykład Codepen na swoim iDevice (lub symulatorze iOS) i spróbuj zmienić ustawienie. Być może pomoże interaktywne zobaczenie zmiany.
davidjb
2
O, rozumiem. Ale dlaczego ktoś miałby chcieć, aby część jego treści była ukryta na mniejszych ekranach?
Daniel Springer,
7
@Dani Różne powody, ale szybkie przykłady to suwaki / karuzele, które umieszczają zawartość poza widocznym obszarem lub w inny sposób duża niereagująca zawartość (np. Obrazy / tabele), która w przeciwnym razie przepełniłaby się i spowodowała, że ​​reszta strony stałaby się mała przy domyślnym shrink-to-fitzachowanie. Po shrink-to-fit=nozastosowaniu strona zachowuje oczekiwany rozmiar, pozwalając zawartości przepełniać obszar wyświetlania. Użytkownik może (zazwyczaj) nadal przewijać lub oddalać, aby zobaczyć przepełnioną zawartość, ale początkowy obszar wyświetlania jest zgodny z rozmiarem urządzenia.
davidjb
2
@davidjb Myślę, że zostało to naprawione w najnowszym iOS 11. Nie jestem w stanie odtworzyć tego błędu.
Zeel Shah
12

Jako statystyki dotyczące użytkowania iOS, wskazujące, że użycie iOS 9.0-9.2.x wynosi obecnie 0,17%. Jeśli te liczby naprawdę wskazują na globalne wykorzystanie tych wersji, to jeszcze bardziej prawdopodobne jest, że usunięcie zmniejszania, aby dopasować, było bezpieczne z metatagu widocznego obszaru.

Po 9.2.x. IOS usuwa to sprawdzenie znacznika w swojej przeglądarce.

Możesz sprawdzić tę stronę https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html

GGGin
źródło