Co robi meta atrybut zmniejszania, aby dopasować rzutnię?
Odpowiedzi:
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
Z Shrink-to-Fit = nie
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.
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.
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