Saat saya memulai aplikasi saya dalam mode potret, itu berfungsi dengan baik. Lalu saya putar ke lanskap dan diskalakan. Untuk membuatnya berskala dengan benar untuk mode lansekap saya harus mengetuk dua kali pada sesuatu dua kali, pertama untuk memperbesar sepenuhnya (perilaku ketuk ganda normal) dan sekali lagi untuk memperbesar sepenuhnya (sekali lagi, perilaku ketuk ganda normal) . Saat zoom out, zoom out ke skala BARU yang benar untuk mode lanskap.
Beralih kembali ke potret tampaknya bekerja lebih konsisten; yaitu, menangani zoom sehingga skalanya benar saat orientasi berubah kembali ke potret.
Saya mencoba mencari tahu apakah ini bug? atau apakah ini sesuatu yang bisa diperbaiki dengan JavaScript?
Dengan konten meta viewport, saya menyetel skala awal ke 1.0 dan saya TIDAK menyetel skala minimum atau maksimum (saya juga tidak mau). Saya menyetel lebar ke lebar perangkat.
Ada ide? Saya tahu banyak orang akan bersyukur memiliki solusi karena tampaknya masalah ini terus berlanjut.
sumber
Jawaban:
Jeremy Keith ( @adactio ) memiliki solusi yang baik untuk ini pada nya blog Orientasi dan skala
Jaga Markup skalabel dengan tidak menyetel skala maksimum dalam markup.
Kemudian nonaktifkan skalabilitas dengan javascript saat dimuat hingga gestur dimulai saat Anda mengizinkan skalabilitas lagi dengan skrip ini:
Pembaruan 22-12-2014:
Pada iPad 1 ini tidak berfungsi, gagal pada pendengar acara. Saya telah menemukan bahwa menghapus
.body
perbaikan yang:sumber
maximum-scale=1.0
efek tetap berlaku setelah gerakan dimulai. Apakah ada cara untuk memperbaikinya?Scott Jehl menemukan solusi fantastis yang menggunakan akselerometer untuk mengantisipasi perubahan orientasi. Solusi ini sangat responsif dan tidak mengganggu gerakan zoom.
https://github.com/scottjehl/iOS-Orientationchange-Fix
Sumber yang diperkecil:
sumber
Saya memiliki masalah yang sama, dan pengaturan skala-maksimum = 1.0 berhasil untuk saya.
Edit: Seperti yang disebutkan dalam komentar, ini menonaktifkan zoom pengguna kecuali jika konten melebihi resolusi lebar. Seperti yang disebutkan, ini mungkin tidak bijaksana. Mungkin juga diinginkan dalam beberapa kasus.
Kode viewport:
sumber
Jika Anda menyetel lebar di viewport:
Dan kemudian ubah orientasi itu kadang-kadang akan memperbesar secara acak (terutama jika Anda menyeret di layar) untuk memperbaiki ini jangan setel lebar di sini saya gunakan:
Ini memperbaiki zoom apa pun yang terjadi maka Anda dapat menggunakan acara window.onorientationchange atau jika Anda ingin platform independen (berguna untuk pengujian) metode window.innerWidth .
sumber
MobileSafari mendukung
orientationchange
acara diwindow
objek. Sayangnya sepertinya tidak ada cara untuk mengontrol zoom secara langsung melalui JavaScript. Mungkin Anda bisa secara dinamis menulis / mengubahmeta
tag yang mengontrol viewport - tapi saya ragu itu akan berhasil, itu hanya mempengaruhi keadaan awal halaman. Mungkin Anda dapat menggunakan acara ini untuk benar-benar mengubah ukuran konten Anda menggunakan CSS. Semoga berhasil!sumber
Saya membuat demo yang berfungsi dari tata letak lanskap / potret tetapi zoom harus dinonaktifkan agar berfungsi tanpa JavaScript:
http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes
sumber
Saya telah menggunakan fungsi ini dalam proyek saya.
jadi tambahkan sajaEventListener:
sumber
Saya telah menemukan solusi baru, berbeda dari yang lain yang pernah saya lihat, dengan menonaktifkan zoom iOS asli, dan sebagai gantinya menerapkan fungsi zoom di JavaScript.
Latar belakang yang sangat baik tentang berbagai solusi lain untuk masalah zoom / orientasi adalah oleh Sérgio Lopes: Perbaikan untuk bug zoom iOS yang terkenal pada perubahan orientasi ke potret .
Ini dapat ditingkatkan, tetapi untuk kebutuhan saya, ini menghindari kelemahan utama yang terjadi dengan semua solusi lain yang telah saya lihat. Sejauh ini saya baru mengujinya menggunakan Safari seluler di iPad 2 dengan iOS4.
Fokus () / blur () adalah solusi untuk mencegah penguncian sesekali fungsi zoom yang dapat terjadi setelah mengubah orientasi dan melakukan zoom beberapa kali.
Menyetel document.body.style memaksa pengecatan ulang layar penuh, yang menghindari masalah sesekali ketika pengecatan ulang gagal parah setelah zoom.
sumber
Elisabeth, Anda dapat mengubah konten viewport secara dinamis dengan menambahkan properti "id" ke metatag:
Kemudian Anda bisa memanggil dengan javascript:
sumber
Berikut cara lain untuk melakukannya, yang tampaknya berhasil dengan baik.
Setel tag meta untuk membatasi viewport ke scale = 1, yang mencegah pembesaran:
<meta name = "viewport" content = "width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1">
Dengan javascript, ubah tag meta 1/2 detik kemudian untuk memungkinkan pembesaran:
setTimeout (function () {document.querySelector ("meta [name = viewport]"). setAttribute ('content', 'width = device-width, initial-scale = 1');}, 500);
Sekali lagi dengan javascript, saat orientasi berubah, muat ulang halaman:
window.onorientationchange = function () {window.location.reload ();};
Setiap kali Anda mengubah orientasi perangkat, halaman dimuat ulang, awalnya tanpa zoom. Tapi 1/2 detik kemudian, kemampuan zoom dipulihkan.
sumber
Menemukan perbaikan yang sangat mudah diterapkan. Setel fokus ke elemen teks yang memiliki ukuran font 50px saat formulir selesai. Tampaknya tidak berfungsi jika elemen teks disembunyikan tetapi menyembunyikan elemen ini mudah dilakukan dengan menyetel properti warna elemen agar tidak memiliki opasitas.
sumber