Apa yang dilakukan atribut meta viewport shrink-to-fit?

143

Saya kesulitan menemukan dokumentasi untuk ini. Apakah ini spesifik untuk Safari?

Ada bug baru-baru ini di iOS 9 (di sini ), solusi yang menambahkan shrink-to-fit=nometa viewport.

Apa yang dilakukan kode ini?

html safari webkit ios9 viewport 755
sumber

Jawaban:

193

Ini adalah Safari spesifik, setidaknya pada saat penulisan, diperkenalkan di Safari 9.0. Dari "Apa yang baru di Safari?" dokumentasi untuk Safari 9.0 :

Perubahan Viewport

Tag meta "width=device-width"viewport menggunakan menyebabkan halaman untuk turun agar sesuai dengan konten yang melebihi batas viewport. Anda dapat mengganti perilaku ini dengan menambahkan "shrink-to-fit=no"tag meta Anda seperti yang ditunjukkan di bawah ini. Nilai tambah akan mencegah penskalaan halaman agar sesuai dengan viewport.

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

Singkatnya, menambahkan ini ke meta tag viewport mengembalikan perilaku pra-Safari 9.0.

Contoh

Berikut adalah contoh visual yang berfungsi yang menunjukkan perbedaan setelah memuat halaman dalam dua konfigurasi.

Bagian merah adalah lebar viewport dan bagian biru diposisikan di luar viewport awal (misalnya left: 100vw). Perhatikan bagaimana pada contoh pertama halaman diperbesar agar pas ketika shrink-to-fit=nodihilangkan (dengan demikian menunjukkan konten out-of-viewport) dan konten biru tetap tidak ditampilkan di layar pada contoh terakhir.

Kode untuk contoh ini dapat ditemukan di https://codepen.io/davidjb/pen/ENGqpv .

Tanpa shrink-to-fit yang ditentukan

Tanpa shrink-to-fit = no

Dengan shrink-to-fit = no

Dengan shrink-to-fit = no

davidjb
sumber
2
Maaf, tapi saya masih tidak mengerti apa kode itu. Bisakah Anda jelaskan dengan cara yang berbeda? Terima kasih!
Daniel Springer
3
@Dani Secara default, Safari akan memperkecil tampilan halaman agar sesuai dengan konten apa pun yang meluap viewport (contoh pertama menunjukkan area biru sebagai terlihat; itu meluap). Menentukan shrink-to-fit=nomencegah perilaku ini, membiarkan level zoom sendirian dan membiarkan konten yang meluap di luar layar. Coba contoh Codepen di iDevice Anda (atau iOS Simulator) dan coba ubah pengaturan. Mungkin melihat perubahan secara interaktif akan membantu.
davidjb
2
Ah saya mengerti. Tetapi mengapa seseorang ingin sebagian kontennya disembunyikan di layar yang lebih kecil?
Daniel Springer
7
@Dani Berbagai alasan, tetapi contoh cepat adalah bilah geser / korsel yang menempatkan konten di luar viewport, atau konten non-responsif besar (mis. Gambar / tabel) yang sebaliknya akan meluap dan menyebabkan halaman lainnya menjadi kecil dengan default. shrink-to-fittingkah laku. Dengan shrink-to-fit=no, halaman tetap pada ukuran yang diharapkan, membiarkan konten meluap viewport. Seorang pengguna dapat (biasanya) masih menggulir atau memperkecil untuk melihat konten yang meluap tetapi viewport awal cocok dengan ukuran perangkat.
davidjb
2
@davidjb Saya pikir ini sudah diperbaiki dengan iOS 11. terbaru. Saya tidak dapat mereproduksi bug ini.
Zeel Shah
12

Sebagai statistik pada penggunaan iOS, menunjukkan bahwa penggunaan iOS 9.0-9.2.x saat ini di 0.17%. Jika angka-angka ini benar-benar menunjukkan penggunaan global dari versi-versi ini, maka akan lebih aman untuk menghapus shrink-to-fit dari meta tag viewport Anda.

Setelah 9.2.x. IOS menghapus tanda ini pada browsernya.

Anda dapat memeriksa halaman ini https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html

GGGin
sumber