Deteksi iPad Mini dalam HTML5

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.

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

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/

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?

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.

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.

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.

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 .

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.

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.

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:

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?

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.

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.

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.

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.

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.

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.

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.

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.

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.

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/

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?

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)

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.