Deteksi iPad Mini dalam HTML5


376

Apple iPad Mini adalah tiruan yang lebih kecil dari iPad 2 dengan lebih banyak cara daripada yang kita inginkan. Dalam JavaScript, window.navigatorobjek memperlihatkan nilai yang sama untuk Mini dan iPad 2. Tes saya sejauh ini untuk mendeteksi perbedaannya tidak mengarah pada kesuksesan.

Mengapa ini penting?

Karena layar iPad Mini dan iPad 2 identik dalam piksel tetapi berbeda dalam ukuran sebenarnya (inci / sentimeter), mereka berbeda dalam PPI (piksel per inci).

Agar aplikasi dan game web menawarkan antarmuka pengguna yang ramah, elemen tertentu disesuaikan ukurannya relatif dengan posisi ibu jari atau jari pengguna, oleh karena itu, kami mungkin ingin skala gambar atau tombol tertentu untuk memberikan pengalaman pengguna yang lebih baik.

Hal-hal yang saya coba sejauh ini (termasuk beberapa pendekatan yang cukup jelas):

  • window.devicepixelratio
  • Lebar elemen CSS dalam satuan cm
  • Kueri media CSS (seperti resolutiondan -webkit-device-pixel-ratio)
  • Gambar SVG di unit serupa
  • Melakukan segala macam transformasi webkit CSS untuk waktu yang ditentukan dan menghitung frame yang diberikan dengan requestAnimFrame(saya berharap dapat mendeteksi perbedaan yang terukur)

Saya kehabisan ide. Bagaimana dengan kamu?

Perbarui Terima kasih atas tanggapannya sejauh ini. Saya ingin mengomentari orang yang memilih mendeteksi iPad mini versus 2 karena Apple memiliki uhm, satu pedoman untuk mengatur semuanya. Oke, inilah alasan saya mengapa saya merasa sangat masuk akal di dunia untuk mengetahui apakah seseorang menggunakan iPad mini atau 2. Dan lakukan dengan alasan saya apa yang Anda sukai.

IPad mini tidak hanya perangkat yang jauh lebih kecil (9,7 inci versus 7,9 inci), tetapi faktor bentuknya memungkinkan penggunaan yang berbeda. IPad 2 biasanya dipegang dengan dua tangan saat bermain kecuali Anda Chuck Norris . Mini lebih kecil, tetapi juga lebih ringan dan memungkinkan untuk bermain game di mana Anda memegangnya di satu tangan dan menggunakan yang lain untuk menggesek atau mengetuk atau yang lainnya. Sebagai seorang desainer dan pengembang game sendiri, saya hanya ingin tahu apakah ini mini sehingga saya dapat memilih untuk menyediakan pemain dengan skema kontrol yang berbeda jika saya mau (misalnya setelah pengujian A / B dengan sekelompok pemain).

Mengapa? Ya, ini adalah fakta yang sudah terbukti bahwa mayoritas pengguna cenderung menggunakan pengaturan default, jadi meninggalkan thumbstick virtual dan meletakkan beberapa kontrol berbasis tap lainnya di layar (hanya memberikan contoh sewenang-wenang di sini) ketika pemain memuat game untuk pertama kalinya adalah apa yang saya, dan mungkin desainer game lain, akan senang bisa lakukan.

Jadi IMHO ini melampaui diskusi jari / pedoman yang tebal dan hanya sesuatu yang harus dilakukan oleh Apple dan semua vendor lainnya: izinkan kami mengidentifikasi perangkat Anda secara unik dan berpikir berbeda daripada mengikuti pedoman.


pertanyaan yang bagus .. bahkan saya sedang mencari solusi. Tidak menemukan apa pun di web
AnhSirk Dasarp

4
Hal terbaik adalah mengajukan bug dengan apple bugreporter.apple.com. Jika cukup banyak orang, ada harapan bahwa mereka akan mendengarkan kami. Situasi saat ini agak mengecewakan.
William Jockusch

Tidak bisakah Anda menggunakan -webkit-min-device-pixel-ratio:? Sedangkan untuk iPhone 4 mobilexweb.com/blog/…
Bgi


1
Hmmm, bagaimana dengan mengikuti HIG daripada mencoba melakukan ini? Ini buang-buang waktu dan usaha, dan dengan tulus membuat saya muak membaca ini. Mengapa orang tidak bisa melakukan hal-hal dengan cara yang benar?
Elland

Jawaban:


253

Putar file audio stereo dan bandingkan respons akselerometer ketika volume tinggi di saluran kanan dan di saluran kiri - iPad2 memiliki speaker mono sedangkan iPad Mini memiliki speaker stereo built-in.

Perlu bantuan Anda untuk mengumpulkan data, silakan kunjungi halaman ini dan bantu saya mengumpulkan data untuk ide gila ini. Saya tidak punya iPad mini jadi saya benar-benar membutuhkan bantuan Anda


35
Anda tidak berpikir perangkat mengeluarkan suara ketika Anda mengunjungi situs web adalah ide yang buruk? Belum lagi orang mungkin perangkatnya diam. Tidak ada suara yang akan menghentikan ini.
flexd

6
Sebagai sedikit modifikasi untuk ini: Putar file audio stereo di mana saluran yang tepat adalah versi terbalik dari saluran kiri. Dengan satu speaker, mereka harus membatalkan dan tidak mempengaruhi accelerometer. Namun demikian, mengandalkan speaker + akselerometer sangat tidak dapat diandalkan.
Kevin Ennis

4
Seseorang benar-benar perlu mengimplementasikan solusi ini dan menunjukkan hasilnya.
Stephen Eilert

14
Sejalan dengan ini, di iPad2, apa yang new webkitAudioContext().destination.numberOfChannelskembali?
Douglas

3
@flexd Anda tidak berpikir melakukan deteksi perangkat adalah ide yang buruk?
Ricardo Tomasi

132

Pembaruan: Sepertinya nilai-nilai ini melaporkan lebar dan tinggi viewport pada saat pembuatan tab, dan mereka tidak berubah pada rotasi, sehingga metode ini tidak dapat digunakan untuk deteksi perangkat !

Anda dapat menggunakan keduanya screen.availWidthatau screen.availHeightkarena keduanya berbeda untuk iPad Mini dan iPad 2.

iPad Mini

screen.availWidth = 768
screen.availHeight = 1004

iPad 2

screen.availWidth = 748
screen.availHeight = 1024

Sumber: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/


3
Sejauh ini sepertinya solusi tanpa kompromi terbaik.
Morgan Wilde

Saya bertanya-tanya tentang perbedaan ini. Saya pikir keduanya menggunakan resolusi yang sama? Apakah Safari chrome berbeda pada kedua perangkat ini?
Marc

10
Ini adalah pendeteksi berapa banyak tab yang terbuka. Di iPad 3 saya melaporkan nilai yang berbeda ketika saya memiliki lebih dari satu ketukan terbuka, cocok dengan laporan pada tangkapan layar. Pengambilan layar mini iPad memiliki dua tab terbuka, sedangkan tangkapan iPad 2 hanya memiliki satu. IPad 3 saya melaporkan nilai yang cocok ketika saya memiliki satu atau dua tab terbuka.
Tn. Berna

7
Tidak, ini bukan detektor dari berapa banyak tab yang terbuka: ini adalah detektor dari orientasi apa perangkat dibuka ketika tab yang digunakan untuk memuat halaman ini pertama kali "digunakan". Saya tidak yakin apakah ini karena ukuran viewport benar-benar sekarang ditetapkan pada nilai itu setelah Anda memutar tab, atau jika itu hanya di-cache salah di suatu tempat, tetapi jika Anda duduk dan bermain dengan banyak tab dalam berbagai rotasi konfigurasi Anda dapat melihat bagaimana korelasinya. Yang menarik adalah bahwa jika Anda mengganti tab, memutar, dan kemudian kembali ke tab sebelumnya dan memuat ulang, pembaruan.
Jay Freeman -saurik-

1
Yap, Jay, saya memang membuat kesalahan yang sama, salah mengartikan hasil untuk penyebab yang salah. Tetapi poin implisit saya menyatakan, bahwa ini bukan detektor untuk mini iPad, karena akan memberikan hasil positif palsu pada iPad lainnya.
Tn. Berna

84

Saya mengerti ini mungkin solusi yang agak berteknologi rendah, tetapi karena kita sepertinya belum bisa memikirkan hal lain ..

Saya berasumsi Anda sudah memeriksa sebagian besar perangkat lain, jadi saya melihat skenario berikut ini mungkin.

Anda dapat memeriksa SEMUA perangkat yang paling populer yang mungkin membutuhkan ukuran / CSS khusus, dan jika cocok, tidak ada yang menganggapnya iPad mini atau bertanya kepada pengguna?

// Device checks here
...
else {
  // it would probably be better to make this a nicer popup-thing
  var mini = prompt("Are you using a iPad mini? Press yes for a better user experience");
  // Store the result for future visits somehow.
}

Saya tahu itu mungkin tampak seperti pendekatan yang bodoh sekarang, tetapi jika saat ini kami tidak memiliki cara untuk memutuskan apakah perangkat tersebut adalah mini iPad atau iPad 2 setidaknya situs web akan dapat digunakan dengan perangkat mini iPad melakukan sesuatu seperti ini.

Anda bahkan bisa menggunakan sesuatu seperti ini:

"Untuk memberikan Anda pengalaman menjelajah yang terbaik, kami mencoba mendeteksi tipe perangkat Anda untuk menyesuaikan situs web dengan perangkat Anda. Sayangnya karena keterbatasan ini tidak selalu memungkinkan dan kami saat ini tidak dapat menentukan apakah Anda menggunakan iPad 2 atau iPad mini dengan menggunakan metode ini.

Untuk pengalaman menjelajah yang terbaik, pilih perangkat apa yang Anda gunakan di bawah ini.

Pilihan ini akan disimpan untuk kunjungan mendatang ke situs web pada perangkat ini.

[] iPad 2 
[*] iPad mini
[] Ancient blackberry device

"

Saya tidak sepenuhnya terbiasa dengan apa yang Anda bisa dan tidak bisa lakukan sisi klien dalam Javascript. Saya tahu Anda bisa mendapatkan IP pengguna, tetapi apakah mungkin untuk mendapatkan alamat mac pengguna? Apakah rentang tersebut berbeda antara iPad2 dan iPad mini?


25
Saya sangat setuju dengan solusi ini. Mengizinkan pengguna untuk memilih (dan berpotensi mengubah) perangkat mereka lebih baik daripada mengunci mereka ke dalam apa yang Anda pikir mereka inginkan. Jika Anda dapat menentukan perangkat dengan cukup akurat; gunakan itu sebagai default, tapi saya pikir Anda harus selalu menawarkan pilihan - bahkan jika itu tersembunyi di menu pengaturan.
Liam Newmarch

2
@LiamNewmarch Saya juga penggemar tebak dan meminta pengguna, daripada menganggap preferensi pengguna dan menguncinya. Terkadang saya ingin menggunakan situs desktop di iPad saya. Biasanya saya ingin menggunakan versi bahasa Inggris dari sebuah situs, di mana pun basis data IP-to-Geo mengatakan saya saat ini berada secara geografis! Anda punya saya upvote Pak.
Rebecca

7
Akan merekomendasikan untuk tidak menggunakan pertanyaan sembulan. lakukan spanduk seperti SO saat masuk secara otomatis. Jadi, pengguna dapat membaca halaman tersebut jika mereka tidak mau menjawab, alih-alih dipaksa keluar dari pola pikir mereka untuk menjawab pertanyaan.
Michael Allen

1
Dengan mengajukan pertanyaan kepada pengguna, Anda menurunkan pengalaman pengguna yang cukup bagi Apple untuk melakukan perubahan, karena itu adalah sesuatu yang sangat diperhatikan.
JiminyCricket

9
-1: Saya benci halaman yang mengajukan pertanyaan ketika saya mengunjungi mereka. Tanggapan saya: "Siapa yang peduli, tunjukkan saja isinya!". Perbedaan antara iPad2 dan iPad mini tidak cukup besar (IMnsHO) untuk menjamin pendekatan ini. JS ya, pertanyaan tidak.
johndodo

74

Saya tahu itu adalah solusi yang mengerikan, tetapi saat ini satu-satunya cara untuk membedakan antara iPad Mini dan iPad 2 adalah dengan memeriksa nomor build-nya dan memetakan setiap build number dengan perangkat terkait.

Biarkan saya memberi Anda sebuah contoh: iPad mini, versi 6.0, mengekspos " 10A406" sebagai nomor build, sementara iPad 2 mengekspos " 10A5376e".

Nilai ini dapat dengan mudah diperoleh melalui regex pada agen pengguna ( window.navigator.userAgent); nomor itu diawali dengan " Mobile/".

Sayangnya ini adalah satu-satunya cara tegas untuk mendeteksi iPad Mini; Saya akan menyarankan untuk mengadopsi viewportpendekatan terkait (jika didukung, menggunakan unit vh / vw) untuk menampilkan konten pada ukuran layar yang berbeda.


5
Nomor build memang tampaknya menjadi kunci, tetapi saya perhatikan nomor build mungkin berbeda tergantung pada negara tempat perangkat itu dibeli. Misalnya di Yunani nomor build iPad 2 tampaknya 10A403 bukan 10A5376e, yang juga saya lihat dari US iPad 2. Saya menduga nomor build untuk mini mungkin juga berbeda.
esjr

67
Solusi ini salah. Untuk beberapa konteks: "nomor build" menggambarkan sistem operasi, dan bukan perangkat keras. Sekarang, jika perangkat yang berbeda selalu memiliki build OS yang berbeda, itu akan baik-baik saja, tetapi itu hanya berlaku di masa lalu untuk rilis OS pertama yang datang dengan setiap perangkat baru. Dalam hal ini, 10A406 adalah nomor build untuk 6.0 untuk iPad Mini, dan 10A403 adalah nomor build untuk 6.0 untuk iPad 2 ( bukan 10A5376e, yang merupakan 6.0 beta 4). Namun, jumlah build 6.0.1 pada keduanya sudah 10A523, jadi build saat ini sudah identik, dan build mendatang akan terus seperti itu.
Jay Freeman -saurik-

1
Saya khawatir Jay benar, memeriksa data saya (seperti itu): nomor build mencerminkan OS.
esjr

1
Sudahkah Anda mencoba hack PPI ini? stackoverflow.com/questions/279749/… - pada dasarnya buat elemen tersembunyi dengan lebar 1 inci, lalu dapatkan lebar dalam piksel. Itu akan menyelesaikan masalah root Anda.
JohnLBevan

@ JohnLBevan: itu mungkin memecahkan masalah rendering, tapi bagaimana dengan analisis log dll? Masalah mendasarnya adalah dengan teman-teman kami di Cupertino dan dorongan ke arah aplikasi 'asli'.
esjr

69

tl; dr. Jangan mengompensasi perbedaan antara iPad mini dan iPad 2 kecuali Anda juga akan mengkompensasi antara jari-jari yang kurus dan kurus.

Apple tampaknya sengaja mencoba untuk tidak membiarkan Anda memberi tahu perbedaannya. Apple tampaknya tidak ingin kita menulis kode yang berbeda untuk versi ukuran iPad yang berbeda. Bukan menjadi bagian dari Apple sendiri, saya tidak tahu pasti ini, saya hanya mengatakan bahwa seperti inilah tampilannya. Mungkin, jika komunitas pengembang menghadirkan detektor mewah untuk iPad mini, Apple mungkin dengan sengaja mematahkan detektor itu di versi iOS mendatang. Apple ingin Anda mengatur ukuran target minimum Anda menjadi 44 poin iOS, dan iOS akan menampilkan bahwa dalam dua ukuran, ukuran iPad yang lebih besar dan ukuran mini iPhone / iPad yang lebih kecil. 44 poin sangat murah hati, dan pengguna Anda pasti akan tahu jika mereka menggunakan iPad yang lebih kecil, sehingga dapat menggantinya sendiri.

Saya menyarankan untuk kembali ke alasan yang Anda nyatakan untuk meminta detektor: menyesuaikan ukuran target untuk kenyamanan pengguna akhir. Dengan memutuskan untuk mendesain satu ukuran pada iPad besar dan ukuran lain pada iPad kecil Anda memutuskan bahwa semua orang memiliki jari ukuran yang sama. Jika desain Anda cukup ketat sehingga perbedaan ukuran dari iPad 2 dan iPad mini membuat perbedaan, daripada ukuran jari antara saya dan istri saya akan membuat perbedaan yang lebih besar. Jadi ganti rugi untuk ukuran jari pengguna, bukan model iPad.

Saya punya saran tentang cara mengukur ukuran jari. Saya adalah pengembang iOS asli, jadi saya tidak tahu apakah ini dapat dilakukan dalam HTML5, tapi inilah cara saya mengukur ukuran jari di aplikasi asli. Saya memiliki pengguna mencubit dua objek bersama, lalu mengukur seberapa dekat mereka berkumpul. Jari-jari yang lebih kecil akan mendekatkan objek, dan Anda dapat menggunakan pengukuran ini untuk menurunkan faktor penskalaan. Ini secara otomatis menyesuaikan ukuran iPad. Orang yang sama akan memiliki pengukuran lebih besar pada titik-titik layar pada mini iPad daripada pada iPad 2. Untuk game, Anda dapat menyebutnya sebagai langkah kalibrasi, atau bahkan tidak menyebutnya. Miliki itu sebagai langkah awal. Misalnya dalam permainan menembak, pemain memasukkan amunisi ke dalam pistol dengan gerakan mencubit.


1
Paragraf pertama ini adalah jawaban yang benar. Ukuran target yang disarankan dari 44 poin sangat baik.
Ricardo Tomasi

Sobat, seandainya saya hanya punya seribu suara lagi untuk diberikan. Paragraf pertama memang itu, Anda memenangkan internet.
Mike

31

Minta pengguna untuk menjatuhkan iPad mereka dari beberapa ribu kaki di atas tanah. Kemudian gunakan accelerometer internal untuk mengukur waktu yang dibutuhkan iPad untuk mencapai kecepatan terminal. IPad yang lebih besar memiliki koefisien hambatan yang lebih besar dan harus mencapai kecepatan terminal dalam waktu kurang dari iPad Mini .

Berikut ini beberapa contoh kode untuk Anda mulai.

function isIPadMini( var timeToReachTerminalVelocity )
{
    return (timeToReachTerminalVelocity > IPAD_MINI_THRESHOLD);
}

Anda hampir pasti perlu meninjau kembali kode ini ketika Apple mau tidak mau melepaskan iPad berikutnya dalam faktor bentuk yang berbeda. Tapi saya yakin Anda akan tetap di atas segalanya dan mempertahankan peretasan ini untuk setiap versi baru iPad.


Bukankah seharusnya "lebih banyak waktu daripada mini iPad"?
ThomasW

1
Garis pemikiran Galileo-ish yang bagus diterapkan pada masalah modern .... Saya ingin tahu apa yang berikutnya ..
matanster

2
Untuk membuatnya lebih andal, Kasing iPad harus dilepas sebelum jatuhkan.
Fuhrmanator

28

Sayangnya, saat ini sepertinya ini tidak mungkin: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

Dua hari yang lalu, saya mentweet tentang masalah yang pertama kali terdeteksi: " Dipastikan bahwa Agen Pengguna Mini iPad sama dengan iPad 2 ". Saya telah menerima ratusan jawaban yang mengatakan bahwa mengendus agen pengguna adalah praktik yang buruk, bahwa kita harus mendeteksi fitur bukan perangkat, dll, dll.

Ya, teman-teman, Anda benar, tetapi tidak memiliki hubungan langsung dengan masalahnya. Dan saya perlu menambahkan berita buruk kedua: tidak ada teknik sisi klien untuk membuat "deteksi fitur" juga .


8
@ net.uk.sweet - Lalu mengapa Anda tidak mengedit jawaban dan memperbaiki kesalahan? Dan btw, bahasa Inggris dalam teks yang dikutip tampaknya tidak terlalu buruk.
Sandman

@shi, bagaimana Anda bisa tahu bahwa penulis teks yang dikutip itu orang Italia? Saya juga bukan penutur asli bahasa Inggris. LOL
Toby D

"tidak ada teknik sisi klien untuk membuat 'deteksi fitur' keduanya" benar-benar salah. deteksi fitur ! = deteksi perangkat
Ricardo Tomasi

@Mytic Moon Saya baru saja melihat artikel asli yang terhubung di posting di atas di mana ada informasi tentang penulis.
shi

26

Ini adalah bidikan liar, tetapi salah satu perbedaan antara iPad 2 dan iPad mini adalah bahwa yang pertama tidak memiliki giroskop 3-sumbu. Mungkin dimungkinkan untuk menggunakan API orientasi perangkat WebKit untuk melihat informasi seperti apa yang dapat Anda peroleh darinya.

Misalnya, halaman ini tampaknya menunjukkan bahwa Anda hanya bisa mendapatkan rotationRatenilai jika perangkat memiliki giroskop.

Maaf saya tidak bisa memberikan POC yang berfungsi - Saya tidak memiliki akses ke iPad mini. Mungkin seseorang yang tahu lebih banyak tentang API orientasi ini dapat berpadu di sini.


3
Jadi, situs web Apple tidak menggambarkan giroskop di iPad 2 sebagai giroskop "3-sumbu"; tetapi, ketika mereka mengatakan "giroskop" yang mereka maksudkan adalah jenis bagian tertentu (sehingga pengembang aplikasi yang mengembangkan game yang mengharuskan bagian itu dengan kemampuan giroskop dapat yakin bahwa itu ada dan akan bekerja untuk mereka). Jika Anda melakukan pencarian Google untuk '"giroskop 3-sumbu" "iPad 2"' Anda menemukan banyak artikel dari akhir 2010 dan awal 2011 yang berbicara tentang bagaimana iPad 2 diharapkan keluar dengan bagian giroskop 3-sumbu yang sama dengan yang iPhone 4 sudah memiliki: ketika keluar, kami tidak kecewa; P.
Jay Freeman -saurik-

Inilah yang saya mendasari saran saya pada: apple.com/ipad/ipad-2/specs.html Tidak menyebutkan giroskop. Hanya "accelerometer". Mengingat itu, dan fakta bahwa dokumen mereka tampaknya menunjukkan bahwa beberapa perangkat hanya mendukung sebagian dari gerakan API, membuat ini patut dicoba. Saya akan, jika saya punya mini iPad ...
Assaf Lavie

2
Tidak, serius: ia mengatakan "giroskop" di sana, di bagian kecil yang sama dengan "accelerometer". Saya kira saya dapat memposting tangkapan layar halaman web yang baru saja Anda tautkan dengan kata "giroskop" yang disorot, tetapi Anda harus dapat menemukannya dengan ctrl-F. (sunting: OK, untuk nilai humor, saya melakukan itu: i.imgur.com/8BZhx.png <- lihat sekarang ?; P) Terlepas dari itu, untuk menempatkan perbedaan "giroskop 3-sumbu" bahkan lebih banyak untuk beristirahat, jika Anda pergi ke halaman tingkat bawah yang disimpan Apple untuk hal semacam ini sebagai referensi dukungan historis, Anda dapat melihat bahwa itu secara khusus bahkan mengatakan "gyro 3-axis". support.apple.com/kb/SP622
Jay Freeman -saurik-

1
Yah, sebenarnya tidak ada kebutuhan untuk berspekulasi jika benar-benar ada perbedaan antara kemampuan API gerak di iPad mini dan iPad 2. Hanya masalah mencoba dan melihat. Jadi, siapa yang punya iPad mini di sini? Apapun, saya sampai pada ide ini dengan melihat spesifikasi teknologi untuk kedua perangkat dan mencari perbedaan yang dapat dirasakan dalam HTML / JS. Mungkin ada perbedaan lain juga.
Assaf Lavie

20

Nah, iPad 2 dan iPad Mini memiliki ukuran baterai yang berbeda.

Jika iOS 6 mendukungnya, Anda dapat 0.0..1.0menggunakan level baterai saat ini window.navigator.webkitBattery.level. Pada tingkat tertentu baik dalam perangkat keras atau perangkat lunak, itu kemungkinan dihitung sebagai CurrentLevel / TotalLevel, di mana keduanya int. Jika demikian, itu akan menghasilkan pelampung yang merupakan kelipatan 1 / TotalLevel. Jika Anda mengambil banyak bacaan level baterai dari kedua perangkat, dan menghitung battery.level * nAnda mungkin dapat menemukan nilai n di mana semua hasil mulai dekat dengan bilangan bulat, yang akan memberi Anda iPad2TotalLeveldan iPadMiniTotalLevel.

Jika kedua angka tersebut berbeda, dan saling terkait, maka dalam produksi Anda dapat menghitung battery.level * iPad2TotalLeveldan battery.level * iPadMiniTotalLevel. Mana yang lebih dekat ke integer akan menunjukkan perangkat mana yang sedang digunakan.

Maaf tentang jumlah jika dalam jawaban ini! Semoga sesuatu yang lebih baik akan datang.


18

EDIT 1: Jawaban asli saya, di bawah, adalah "jangan lakukan itu". Demi menjadi positif:

Pertanyaan sebenarnya, saya pikir, tidak ada hubungannya dengan iPad X vs iPad mini. Saya pikir ini tentang mengoptimalkan dimensi elemen UI dan penempatan ke ergonomi pengguna. Anda perlu menentukan ukuran jari pengguna untuk mendorong ukuran elemen UI Anda dan, mungkin, menentukan posisi. Ini, sekali lagi, adalah dan mungkin harus tiba tanpa perlu benar-benar tahu apa perangkat yang Anda jalankan. Mari kita melebih-lebihkan: Aplikasi Anda berjalan pada layar diagonal 40 inci. Tidak tahu merek dan model atau DPI. Bagaimana Anda mengukur kontrol?

Anda perlu menampilkan tombol yang merupakan elemen gating ke situs / game. Saya akan menyerahkan kepada Anda untuk memutuskan di mana atau bagaimana masuk akal untuk melakukan ini.

Sementara pengguna akan melihat ini sebagai tombol tunggal, pada kenyataannya itu akan terdiri dari matriks tombol kecil yang penuh sesak yang secara visual tertutup untuk muncul sebagai gambar tombol tunggal. Bayangkan tombol 100 x 100 piksel yang terdiri dari 400 tombol, masing-masing 5 x 5 piksel. Anda perlu bereksperimen untuk melihat apa yang masuk akal di sini dan seberapa kecil pengambilan sampel Anda.

Kemungkinan CSS untuk susunan tombol:

.sense_row {
  width:100px;
  height:5px;
  margin:0;
  padding:0;
}

.sense_button {
  float:left;
  width:3px;
  height:3px;
  padding:0px;
  margin:0px;
  background-color:#FF0;
  border:1px solid #000;
} 

Dan array yang dihasilkan:

susunan tombol

Ketika pengguna menyentuh larik tombol, Anda akan, secara efektif, mendapatkan gambar dari area kontak jari pengguna. Anda kemudian dapat menggunakan kriteria apa pun yang Anda inginkan (mungkin diturunkan secara empiris) untuk sampai pada serangkaian angka yang dapat Anda gunakan untuk mengukur dan memposisikan berbagai elemen UI sesuai kebutuhan Anda.

Keindahan dari pendekatan ini adalah Anda tidak lagi peduli dengan nama perangkat atau model yang mungkin Anda hadapi. Yang Anda pedulikan hanyalah ukuran jari pengguna terkait dengan perangkat.

Saya akan membayangkan bahwa tombol sense_array ini dapat disembunyikan sebagai bagian dari proses entri ke dalam aplikasi. Misalnya, jika itu adalah permainan, mungkin ada tombol "Mainkan" atau berbagai tombol dengan nama pengguna atau sarana untuk memilih level apa yang akan mereka mainkan, dll. Anda mendapatkan idenya. Tombol sense_array bisa hidup di mana saja pengguna harus menyentuh untuk masuk ke dalam permainan.

EDIT 2: Hanya mencatat bahwa Anda mungkin tidak membutuhkan banyak tombol akal. Satu set lingkaran atau tombol konsentris yang diatur seperti tanda bintang besar *mungkin baik-baik saja. Anda harus bereksperimen.

Dengan jawaban lama saya, di bawah, saya memberi Anda kedua sisi mata uang.

JAWABAN TUA:

Jawaban yang benar adalah: Jangan lakukan ini. Itu ide yang buruk.

Jika tombol Anda sangat kecil sehingga tidak dapat digunakan pada mini, Anda perlu membuat tombol Anda lebih besar.

Jika saya telah mempelajari apa pun dalam melakukan aplikasi iOS asli, mencoba mengakali Apple adalah formula untuk rasa sakit dan kejengkelan yang tidak semestinya. Jika mereka memilih untuk tidak mengizinkan Anda mengidentifikasi perangkat itu karena, yah, di kotak pasir mereka, Anda seharusnya tidak.

Saya bertanya-tanya, apakah Anda menyesuaikan ukuran / lokasi di portrait vs landscape?


Tunggu, apakah Anda membaca pertanyaannya? "elemen-elemen tertentu diatur dalam ukuran relatif terhadap posisi ibu jari atau jari pengguna"
Christian

Pertanyaan saya adalah apakah OP menyesuaikan elemen berdasarkan orientasi potret / lanskap. Browser web akan menyesuaikan secara otomatis dengan lebar lanskap tambahan dan membuat semua konten lebih besar dari potret. Saya hanya mencoba menunjukkan bahwa - kecuali Anda mengunci semuanya - hampir tidak ada cara untuk mengoptimalkan untuk setiap perangkat, orientasi, dan pengguna yang mungkin kecuali Anda menulis aplikasi iOS asli. Bahkan kemudian Anda mungkin ingin berhati-hati tentang pilihan yang Anda buat. Mungkinkah ini dilakukan dari aplikasi web dan javascript? Mungkin. Aku hanya berpikir itu bukan ide yang bagus.
Martin

Ah, begitu. Sunting juga menarik, akan tertarik untuk melihat sesuatu seperti itu dalam praktek.
Christian

1
Apakah "array indra" seperti itu akan berfungsi? Saya menganggap iOS akan memilih sel mana yang paling dekat dengan tempat pengguna menyentuh dan hanya "klik" itu, tidak setiap sel di bawah jari pengguna. Jika melakukan pekerjaan, yang akan cukup sialan dingin, meskipun.
HellaMad

Tidak ada alasan untuk itu tidak berhasil. Ini adalah sekelompok objek yang merespons acara sentuh dan mengirim pesan.
Martin

11

Bagaimana dengan tolok ukur mikro, hitung sesuatu yang membutuhkan kira-kira X mikrodetik pada iPad 2 dan Y sec pada iPad mini.

Ini mungkin tidak cukup akurat, tetapi mungkin ada beberapa instruksi yang membuat chip mini iPad lebih efisien.


11

Ya, itu poin yang bagus untuk memeriksa giroskop. Anda dapat melakukannya dengan mudah

https://developer.apple.com/documentation/webkitjs/devicemotionevent

atau semacamnya

window.ondevicemotion = function(event) {
    if (navigator.platform.indexOf("iPad") != -1 && window.devicePixelRatio == 1) {
        var version = "";
        if (event.acceleration) version = "iPad2";
        else version="iPad Mini";

        alert(version);
    }
    window.ondevicemotion = null;
}​

Tidak memiliki iPad untuk mengujinya.


12
Solusi ini tidak berfungsi (diuji pada iPad Mini dan iPad 2: keduanya dideteksi sebagai "iPad2") sebagai 1) fitur event.acceleration dirancang untuk bekerja jika perangkat memiliki giroskop mewah atau accelerometer yang lebih tua dan 2) menurut situs web Apple, baik iPad Mini dan iPad 2 memiliki bagian giroskop yang mewah, sehingga konsep cek ini tidak akan berhasil di tempat pertama.
Jay Freeman -saurik-

8

Mewajibkan semua pengguna dengan agen pengguna iPad2 untuk memasok foto menggunakan kamera bawaan dan mendeteksi resolusi menggunakan API File HTML . Foto Mini iPad akan menjadi resolusi yang lebih tinggi karena perbaikan pada kamera.

Anda juga bisa bermain-main dengan membuat elemen kanvas yang tidak terlihat, dan mengonversinya menjadi PNG / JPG menggunakan Canvas API. Saya tidak punya cara untuk mengujinya, tetapi bit yang dihasilkan mungkin berbeda karena algoritma kompresi yang mendasari dan kerapatan piksel perangkat.


7

Anda selalu bisa bertanya kepada pengguna ?!

Jika Pengguna tidak dapat melihat tombol atau konten, maka beri mereka cara untuk mengatur skala sendiri. Anda selalu dapat membangun beberapa tombol penskalaan ke situs untuk membuat konten (teks / tombol) lebih besar / lebih kecil. Ini (hampir) dijamin akan bekerja untuk setiap resolusi iPad saat ini dan mungkin setiap apel resolusi di masa depan memutuskan mereka ingin membuat.


6

Ini bukan jawaban atas pertanyaan Anda yang diajukan, tetapi saya harap ini akan lebih bermanfaat daripada mengatakan "jangan lakukan itu":

Alih-alih mendeteksi iPad Mini, mengapa tidak mendeteksi bahwa pengguna mengalami kesulitan mengenai kontrol (atau: secara konsisten menekan dalam subkawasan kontrol), dan menumbuhkan / memperkecil ukuran kontrol untuk mengakomodasi mereka?

Pengguna yang membutuhkan kontrol lebih besar mendapatkannya terlepas dari perangkat kerasnya; pengguna yang tidak memerlukan kontrol lebih besar dan ingin melihat lebih banyak konten juga mendapatkannya. Ini tidak sesederhana hanya mendeteksi perangkat keras, dan akan ada beberapa hal halus untuk diperbaiki, tetapi jika dilakukan dengan hati-hati itu bisa sangat bagus.


6

Ini mengingatkan saya pada kutipan dari film Equilibrium:

"Apa, menurutmu, cara termudah untuk mengambil senjata dari Ulama Tata Bahasa?"

"Kamu memintanya untuk itu."

Kami sudah terbiasa memperjuangkan solusi, ketika terkadang, mungkin lebih baik untuk bertanya. (Ada alasan bagus mengapa kita biasanya tidak melakukan ini, tetapi itu selalu merupakan pilihan.) Semua saran di sini brilian, tetapi solusi sederhana mungkin meminta program Anda bertanya iPad mana yang mereka gunakan ketika mereka memulainya. .

Saya tahu bahwa ini adalah jawaban yang kurang ajar, tapi saya harap ini adalah pengingat bahwa kita tidak harus berjuang untuk semuanya. (Saya sudah menguatkan diri untuk downvotes.: P)

Beberapa contoh:

  • Deteksi keyboard selama instalasi OS terkadang tidak dapat mendeteksi keyboard tertentu, sehingga penginstal harus bertanya.
  • Windows bertanya apakah jaringan yang Anda hubungkan adalah jaringan rumah atau jaringan publik.
  • Komputer tidak dapat mendeteksi orang yang akan menggunakannya, sehingga mereka memerlukan nama pengguna dan kata sandi.

Semoga sukses - Saya harap Anda menemukan solusi yang luar biasa! Namun, jika Anda tidak, jangan lupakan yang ini.


Ini mungkin bukan sesuatu yang pengguna non-teknis akan sadari.
Julian

5

Bukan menjawab pertanyaan, tetapi pertanyaan di balik pertanyaan:

Tujuan Anda adalah untuk meningkatkan pengalaman pengguna di layar yang lebih kecil. Tampilan kontrol UI adalah salah satu bagian darinya. Bagian lain dari UX adalah cara aplikasi merespons.

Bagaimana jika Anda membuat area yang merespons keran cukup besar untuk menjadi ramah pengguna pada iPad Mini sambil menjaga representasi visual dari kontrol UI cukup kecil untuk menyenangkan secara visual pada iPad?

Jika Anda telah mengumpulkan cukup banyak ketukan yang tidak ada di area visual, Anda dapat memutuskan untuk mengukur skala Kontrol UI secara visual.

Sebagai bonus, ini juga berfungsi untuk tangan besar di iPad.


5

Semua solusi di sini bukan bukti masa depan (apa yang mencegah Apple merilis iPad dengan ukuran layar yang sama dengan iPad 2 tetapi resolusi yang sama dengan iPad Mini). Jadi saya datang dengan sebuah ide:

Buat div dengan lebar 1 inci dan tambahkan ke badan. Lalu saya membuat div lain dengan lebar 100% dan menambahkannya ke tubuh:

var div1= $("<div/>").appendTo(document.body).width("1in");
var div2= $("<div/>").appendTo(document.body).width("100%");

Fungsi jQuery width () selalu mengembalikan nilai dalam piksel sehingga Anda bisa:

var screenSize= div2.width() / div1.width();

screenSize sekarang memegang ukuran yang tersedia untuk aplikasi dalam inci (berhati-hatilah saat membulatkan erros). Anda dapat menggunakannya untuk menempatkan GUI Anda seperti yang Anda suka. Juga jangan lupa untuk menghapus div yang tidak berguna sesudahnya.

Perhatikan juga bahwa algoritma yang diusulkan oleh Kaspars tidak hanya tidak akan berfungsi jika pengguna menjalankan aplikasi sebagai layar penuh, tetapi juga akan rusak jika Apple menambal UI browser.

Ini tidak akan membedakan perangkat, tetapi saat Anda menjelaskan dalam pengeditan, apa yang sebenarnya ingin Anda ketahui adalah ukuran layar perangkat. Ide saya juga tidak akan memberi tahu Anda dengan tepat ukuran layar, tetapi itu akan memberi Anda informasi yang lebih berguna, ukuran sebenarnya (dalam inci) yang Anda miliki untuk menggambar GUI Anda.

EDIT: Gunakan kode ini untuk memeriksa apakah itu benar-benar berfungsi pada perangkat Anda. Saya tidak memiliki iPad apa pun untuk mengujinya.

var div1= $("<div/>").appendTo(document.body).width("1in").height("1in").css("position", "absolute");
var div2= $("<div/>").appendTo(document.body).width("100%").height("100%").css("position", "absolute");
var width= div2.width() / div1.width()
var height= div2.height() / div1.height()
alert(Math.sqrt(width*width + height*height));

Seharusnya muncul jendela dengan screensize Anda dalam inci. Tampaknya berfungsi di laptop saya, mengembalikan 15,49 sementara layar laptop saya dipasarkan sebagai 15,4 ''. Adakah yang bisa menguji ini di iPad dan memposting komentar? Jangan lupa untuk menjalankannya layar penuh.

EDIT2: Ternyata halaman yang saya uji memiliki beberapa CSS yang saling bertentangan . Saya memperbaiki kode tes agar berfungsi dengan benar sekarang. Anda memerlukan posisi: absolut pada div sehingga Anda dapat menggunakan ketinggian dalam%.

EDIT3: Saya melakukan riset, dan sepertinya tidak ada cara untuk benar-benar mendapatkan ukuran layar pada perangkat apa pun. Itu bukan sesuatu yang bisa diketahui OS. Saat Anda menggunakan unit dunia nyata di CSS, sebenarnya itu hanya perkiraan berdasarkan beberapa properti layar Anda. Tidak perlu dikatakan bahwa ini sama sekali tidak akurat.


Sudahkah Anda mengujinya? Apakah 1 inci benar-benar 1 inci fisik yang sama pada Mini dan iPad? Ada kemungkinan bahwa 1 inci pada Mini hanya muncul sebagai 1/2 inci.
Kernel James

Diuji pada iPad 2, 3 dan Mini. Ketiganya mengembalikan 3,8125.
Alfred

@ AlfredNerstu wow benarkah? Apakah ini bug Safari? Bisakah Anda mengujinya di safari untuk mac?
Hoffmann

@AlfredNerstu maaf kode salah, saya memperbaikinya sekarang, halaman saya awalnya mengujinya memiliki beberapa CSS yang bertentangan yang membuatnya agak berfungsi. Ternyata Anda memerlukan posisi: absolut pada div untuk menggunakan nilai ketinggian dalam%. Sekarang kode itu memberi saya 15,49 inci pada laptop saya 15,4 'pada halaman "bersih" (tidak ada css dan tidak ada elemen selain divs).
Hoffmann

Saya mencoba kode baru dan sekarang semua 2, 3 dan Mini semuanya kembali 9.5. Saya menjalankan kode di jsfiddle, tidak tahu apakah itu dapat mengacaukan sesuatu? Lebih mungkin, apakah Safari di iOS dibuat untuk layar 9,7 inci dan membuat 1 inci sesuai?
Alfred

2

Tidak diuji, tetapi alih-alih memutar file audio dan memeriksa saldo, itu bisa bekerja untuk mendengarkan mikrofon, mengekstrak suara latar belakang, dan menghitung "warna" (grafik frekuensi). Jika IPad Mini memiliki model mikrofon yang berbeda dari IPad 2, maka warna latar belakangnya harus berbeda secara terukur dan beberapa teknik sidik jari audio mungkin membantu Anda mengetahui perangkat mana yang digunakan.

Saya tidak berpikir dengan serius bahwa ini layak dan sepadan dengan kerumitan dalam kasus khusus ini, tetapi saya pikir sidik jari suara latar dapat digunakan di beberapa aplikasi, misalnya untuk memberi tahu Anda di mana Anda berada saat berada di dalam gedung.


2

Berdasarkan pertanyaan Douglas tentang new webkitAudioContext().destination.numberOfChannelsiPad 2 saya memutuskan untuk menjalankan beberapa tes.

Memeriksa numberOfChannels dikembalikan 2pada iPad mini tetapi tidak ada pada iPad 2 dengan iOS 5 dan 2juga dengan iOS 6.

Kemudian saya mencoba memeriksa apakah webkitAudioContext tersedia

var hasWebkitAudio = typeof(webkitAudioContext) === "object";
alert(hasWebkitAudio);​

Di sini sama iPad Mini dan iPad 2 dengan iOS 6 mengembalikan true sedangkan iPad 2 dengan iOS 5 mengembalikan false.

(Tes ini tidak berfungsi pada desktop, untuk memeriksa desktop apakah webkitAudioContext adalah fungsi).

Berikut kode untuk Anda coba: http://jsfiddle.net/sqFbc/


2

Bagaimana jika Anda membuat banyak div lebar 1 "x1" dan menambahkannya satu per satu ke div induk sampai kotak pembatas melompat dari 1 inci ke 2 inci? Satu inci pada mini adalah ukuran yang sama dengan satu inci pada iPad, kan?


1
Jadi saya mencoba ini, tetapi pada mini, "inci" lebih kecil dari "inci" pada iPad biasa. Jadi cara ini tidak akan berhasil.
Scovetta

2

Di iOS7 ada pengaturan seluruh sistem yang dapat diubah pengguna: ketika hal-hal menjadi terlalu kecil untuk dibaca, pengaturan Ukuran Teks dapat diubah.

Ukuran teks itu dapat digunakan untuk membentuk UI dengan dimensi yang masuk akal, misalnya untuk sebuah tombol (diuji pada iPad Mini Retina untuk bereaksi terhadap perubahan pengaturan Ukuran Teks):

padding: 0.5em 1em 0.5em 1em;
font: -apple-system-body;    

( contoh tombol CSS, terima kasih kepada jsfiddle dan cssbuttongenerator)


1

Saya mendeteksi iPad mini dengan membuat kanvas yang lebih besar yang bisa dibuat iPad mini , mengisi piksel kemudian membaca warnanya kembali. Mini iPad membaca warnanya sebagai '000000'. yang lainnya menerjemahkannya sebagai warna isi.

Kode parsial:

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}
var test_colour = '8ed6ff';
working_context.fillStyle = '#' + test_colour;
working_context.fillRect(0,0,1,1);
var colour_data = working_context.getImageData(0, 0, 1, 1).data;
var colour_hex = ("000000" + rgbToHex(colour_data[0], colour_data[1], colour_data[2])).slice(-6);

Saya membutuhkan ini untuk ukuran kanvas sehingga deteksi fitur dalam kasus penggunaan saya.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.