javascript - एचटीएमएल 5 में आईपैड मिनी का पता लगाएं




html5 ipad (16)

ऐप्पल की आईपैड मिनी आईपैड 2 का एक छोटा क्लोन है जो हम चाहते हैं उससे अधिक तरीकों से। जावास्क्रिप्ट में, window.navigator ऑब्जेक्ट मिनी और आईपैड 2 के लिए समान मानों को उजागर करता है। अंतर का पता लगाने के लिए अब तक मेरे परीक्षणों से सफलता नहीं मिली है।

यह महत्वपूर्ण क्यों है?

चूंकि आईपैड मिनी और आईपैड 2 स्क्रीन पिक्सेल में समान हैं लेकिन वास्तविक आकार (इंच / सेंटीमीटर) में भिन्न होती हैं, वे PPI (पिक्सेल प्रति इंच) में भिन्न होती हैं।

एक दोस्ताना यूजर इंटरफेस की पेशकश करने के लिए वेब अनुप्रयोगों और गेम के लिए, कुछ तत्व उपयोगकर्ता के अंगूठे या उंगली की स्थिति के सापेक्ष आकार में समायोजित होते हैं, इस प्रकार, हम उस बेहतर उपयोगकर्ता अनुभव के लिए कुछ छवियों या बटनों को स्केल करना चाहते हैं।

जिन चीजों को मैंने अभी तक कोशिश की है (कुछ सुंदर स्पष्ट दृष्टिकोण सहित):

  • window.devicepixelratio
  • सेमी इकाई में सीएसएस तत्व चौड़ाई
  • सीएसएस मीडिया प्रश्न (जैसे resolution और -webkit-device-pixel-ratio )
  • इसी तरह की इकाइयों में एसवीजी चित्र
  • सीएसएस वेबकिट के सभी प्रकारों को एक निश्चित समय के लिए बदलता है और requestAnimFrame साथ प्रस्तुत फ्रेम की गणना करता requestAnimFrame (मैं एक मापनीय अंतर का पता लगाने की उम्मीद कर रहा था)

मैं विचारों से ताजा हूं। आप कैसे हैं?

अब तक प्रतिक्रियाओं के लिए धन्यवाद अद्यतन करें । मैं आईपैड मिनी बनाम 2 का पता लगाने के खिलाफ मतदान करने वाले लोगों पर टिप्पणी करना चाहता हूं क्योंकि ऐप्पल के पास उम है, उन सभी पर शासन करने के लिए एक दिशानिर्देश। ठीक है, मेरा तर्क यह है कि मुझे लगता है कि यह वास्तव में दुनिया में सभी भावनाओं को यह जानने के लिए क्यों समझता है कि कोई व्यक्ति आईपैड मिनी या 2 का उपयोग कर रहा है या नहीं। और मेरी तर्क के साथ करें कि आपको क्या पसंद है।

आईपैड मिनी न केवल एक बहुत छोटा डिवाइस (9.9 इंच बनाम 7.9 इंच) है, लेकिन इसका फॉर्म कारक एक अलग उपयोग के लिए अनुमति देता है। जब तक आप चक नॉरिस न हों तब तक आईपैड 2 आमतौर पर दो हाथों से आयोजित होता है। मिनी छोटा है, लेकिन यह भी बहुत हल्का है और गेमप्ले के लिए अनुमति देता है जहां आप इसे एक हाथ में रखते हैं और दूसरे को स्वाइप या टैप या व्हाट्नॉट करने के लिए उपयोग करते हैं। एक गेम डिजाइनर और डेवलपर के रूप में, मैं सिर्फ यह जानना चाहता हूं कि यह मिनी है, इसलिए यदि मैं चाहता हूं तो खिलाड़ी को एक अलग कंट्रोलकेम प्रदान करना चुन सकता है (उदाहरण के लिए खिलाड़ियों के समूह के साथ ए / बी परीक्षण के बाद)।

क्यूं कर? खैर, यह एक सिद्ध तथ्य है कि अधिकांश उपयोगकर्ता डिफ़ॉल्ट सेटिंग्स के साथ जाते हैं, इसलिए वर्चुअल थंबस्टिक को छोड़कर और स्क्रीन पर कुछ अन्य टैप-आधारित नियंत्रण डालते हैं (जब यहां खिलाड़ी लोड होता है तो बस यहां एक मनमाना उदाहरण दे रहा है) पहली बार खेल मैं, और शायद अन्य गेम डिजाइनर, करने में सक्षम होना पसंद करेंगे।

तो आईएमएचओ यह मोटी उंगलियों / दिशानिर्देशों के विचार-विमर्श से परे है और कुछ ऐसा है जो ऐप्पल और अन्य सभी विक्रेताओं को करना चाहिए: हमें अपने डिवाइस की विशिष्ट पहचान करने और दिशानिर्देशों के बजाय अलग सोचने की अनुमति दें।


आईपैड 2 उपयोगकर्ता एजेंट के साथ सभी उपयोगकर्ताओं को बिल्ट इन कैमरे का उपयोग करके फोटो की आपूर्ति करने और एचटीएमएल फाइल एपीआई का उपयोग करके रिज़ॉल्यूशन का पता लगाने की आवश्यकता है । कैमरा में सुधार के कारण आईपैड मिनी फोटो उच्च रिज़ॉल्यूशन होगा।

आप एक अदृश्य कैनवास तत्व बनाने के साथ भी खेल सकते हैं, और इसे कैनवास एपीआई का उपयोग करके पीएनजी / जेपीजी में परिवर्तित कर सकते हैं। मेरे पास इसका परीक्षण करने का कोई तरीका नहीं है, लेकिन परिणामी बिट्स अंतर्निहित संपीड़न एल्गोरिदम और डिवाइस की पिक्सेल घनत्व के कारण भिन्न हो सकती हैं।


आप हमेशा उपयोगकर्ता से पूछ सकते हैं ?!

यदि उपयोगकर्ता बटन या सामग्री नहीं देख पा रहा है, तो उन्हें स्केलिंग को प्रबंधित करने का एक तरीका दें। सामग्री (टेक्स्ट / बटन) को बड़ा / छोटा बनाने के लिए आप हमेशा साइट पर कुछ स्केलिंग बटन बना सकते हैं। यह (लगभग) किसी भी मौजूदा आईपैड रिज़ॉल्यूशन के लिए काम करने की गारंटी होगी और शायद भविष्य में किसी भी रिज़ॉल्यूशन रिज़ॉल्यूशन सेब का फैसला करना है कि वे बनाना चाहते हैं।


एक माइक्रो बेंचमार्क के बारे में, कुछ ऐसी गणना करें जो आईपैड मिनी पर आईपैड 2 और वाई सेकेंड पर लगभग एक्स माइक्रोसेकंड लेता है।

यह शायद पर्याप्त सटीक नहीं है, लेकिन कुछ निर्देश हो सकते हैं कि आईपैड मिनी की चिप अधिक कुशल है।


एक स्टीरियो ऑडियो फ़ाइल चलाएं और दाएं चैनल पर और बाएं चैनल पर वॉल्यूम उच्च होने पर एक्सेलेरोमीटर प्रतिक्रिया की तुलना करें - आईपैड 2 में मोनो स्पीकर थे जबकि आईपैड मिनी में स्टीरियो स्पीकर निर्मित थे।

डेटा इकट्ठा करने के लिए आपकी मदद की ज़रूरत है कृपया इस पेज पर जाएं और मुझे इस पागल विचार के लिए डेटा एकत्र करने में मदद करें। मेरे पास आईपैड मिनी नहीं है इसलिए मुझे आपकी मदद की ज़रूरत है


टीएल; डॉ। आईपैड मिनी और आईपैड 2 के बीच के अंतर के लिए क्षतिपूर्ति न करें जब तक आप वसा और पतली उंगलियों के बीच क्षतिपूर्ति नहीं करेंगे।

ऐप्पल जानबूझ कर आप को अंतर बताने की कोशिश नहीं कर रहा है। ऐप्पल नहीं चाहता कि हम आईपैड के विभिन्न आकार संस्करणों के लिए अलग-अलग कोड लिखें। ऐप्पल का हिस्सा नहीं है, मैं निश्चित रूप से यह नहीं जानता, मैं बस इतना कह रहा हूं कि ऐसा ही दिखता है। शायद, यदि डेवलपर समुदाय आईपैड मिनीिस के लिए एक फैंसी डिटेक्टर के साथ आता है, तो ऐप्पल जानबूझ कर आईओएस के भविष्य के संस्करणों में उस डिटेक्टर को तोड़ सकता है। ऐप्पल चाहता है कि आप अपना न्यूनतम लक्ष्य आकार 44 आईओएस पॉइंट पर सेट करें, और आईओएस दो आकारों में प्रदर्शित होगा, बड़ा आईपैड आकार और छोटा आईफोन / आईपैड मिनी आकार। 44 अंक बहुत उदार हैं, और आपके उपयोगकर्ता निश्चित रूप से जानते होंगे कि वे छोटे आईपैड पर हैं, इसलिए वे स्वयं को क्षतिपूर्ति कर सकते हैं।

मैं डिटेक्टर से पूछने के लिए आपके निर्दिष्ट कारण पर वापस कदम उठाने का सुझाव देता हूं: अंतिम उपयोगकर्ता सुविधा के लिए लक्षित आकार समायोजित करना। बड़े आईपैड पर एक आकार के लिए डिज़ाइन करने और छोटे आईपैड पर एक और आकार के लिए डिज़ाइन करके आप निर्णय ले रहे हैं कि सभी लोगों के पास समान आकार की उंगलियां हैं। यदि आपका डिज़ाइन इतना तंग है कि आईपैड 2 और आईपैड मिनी से आकार में अंतर एक अंतर बनाता है, तो मेरे और मेरी पत्नी के बीच उंगलियों के आकार की तुलना में एक बड़ा अंतर आएगा। इसलिए उपयोगकर्ता उंगली के आकार की क्षतिपूर्ति करें, न कि आईपैड मॉडल।

मेरे पास उंगली के आकार को मापने के बारे में एक सुझाव है। मैं एक मूल आईओएस डेवलपर हूं, इसलिए मुझे नहीं पता कि यह HTML5 में पूरा किया जा सकता है, लेकिन यहां मैं मूल ऐप में उंगली के आकार को कैसे मापूंगा। मैं उपयोगकर्ता को दो वस्तुओं को एक साथ जोड़ता हूं, फिर मापता हूं कि वे कितने करीब मिलते हैं। छोटी उंगलियां वस्तुओं को एकसाथ मिलती हैं, और आप स्केलिंग कारक प्राप्त करने के लिए इस माप का उपयोग कर सकते हैं। यह स्वचालित रूप से आईपैड आकार के लिए समायोजित करता है। एक ही व्यक्ति के पास आईपैड मिनी पर आईपैड मिनी पर स्क्रीन पॉइंट्स का बड़ा मापन होगा। एक गेम के लिए आप इसे एक अंशांकन चरण कह सकते हैं, या इसे कॉल भी नहीं कर सकते हैं। इसे एक शुरुआती चरण के रूप में लें। उदाहरण के लिए एक शूटिंग गेम में खिलाड़ी ने बंदूक में बारूद की गति के साथ बारूद लगाया है।


दुर्भाग्यवश, फिलहाल ऐसा लगता है कि यह संभव नहीं है: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

दो दिन पहले, मैंने पहली बार पता चला समस्या के बारे में ट्वीट किया है: " यह पुष्टि की गई है कि आईपैड मिनी उपयोगकर्ता एजेंट आईपैड 2 जैसा ही है "। मुझे सचमुच सैकड़ों उत्तर मिलते हैं कि उपयोगकर्ता एजेंट स्नीफिंग एक बुरी प्रथा है, हमें सुविधाओं का पता लगाना चाहिए, न कि डिवाइसेज इत्यादि।

हाँ हाँ दोस्तों, आप सही हैं, लेकिन समस्या के साथ इसका कोई सीधा संबंध नहीं है। और मुझे दूसरी बुरी खबर जोड़ने की ज़रूरत है: "फीचर डिटेक्शन" बनाने के लिए कोई क्लाइंट-साइड तकनीक नहीं है


मैं समझता हूं कि यह थोड़ा कम तकनीक समाधान हो सकता है, लेकिन चूंकि हम अभी तक कुछ और नहीं आ सकते हैं ..

मुझे लगता है कि आप पहले से ही अधिकांश उपकरणों की जांच कर रहे हैं, इसलिए मैं निम्नलिखित परिदृश्यों को संभव देखता हूं।

आप उन सभी संभावित लोकप्रिय उपकरणों की जांच कर सकते हैं जिनके लिए विशेष सीएसएस / आकार की आवश्यकता होती है, और यदि उनमें से कोई भी मेल नहीं खाता है तो यह मानता है कि यह एक आईपैड मिनी है या बस उपयोगकर्ता से पूछता है?

// 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.
}

मुझे पता है कि अभी एक बेवकूफ दृष्टिकोण की तरह लग सकता है, लेकिन अगर वर्तमान में यह तय करने का कोई तरीका नहीं है कि डिवाइस आईपैड मिनी या आईपैड 2 है तो कम से कम वेबसाइट आईपैड मिनी डिवाइस के साथ कुछ ऐसा करने योग्य होगी।

आप इस तरह से कुछ भी जा सकते हैं:

"आपको सबसे अच्छा संभव ब्राउज़िंग अनुभव देने के लिए हम आपके डिवाइस पर वेबसाइट को कस्टमाइज़ करने के लिए अपने डिवाइस-प्रकार का पता लगाने का प्रयास करते हैं। दुर्भाग्य से सीमाओं के कारण यह हमेशा संभव नहीं होता है और हम वर्तमान में यह निर्धारित नहीं कर सकते कि आप आईपैड 2 या आईपैड का उपयोग करते हैं या नहीं इन विधियों का उपयोग करके मिनी।

सर्वोत्तम संभव ब्राउज़िंग अनुभव के लिए, कृपया चुनें कि आप किस डिवाइस का उपयोग कर रहे हैं।

यह विकल्प इस डिवाइस पर वेबसाइट की भविष्य की यात्राओं के लिए संग्रहीत किया जाएगा।

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

"

मैं पूरी तरह से परिचित नहीं हूं कि आप जावास्क्रिप्ट में क्या कर सकते हैं और क्लाइंट-साइड नहीं कर सकते हैं। मुझे पता है कि आप उपयोगकर्ता का आईपी प्राप्त कर सकते हैं, लेकिन क्या उपयोगकर्ता का मैक पता प्राप्त करना संभव है? क्या वे आईपैड 2 और आईपैड मिनी के बीच अलग हैं?


यह आपके प्रश्न का उत्तर नहीं है, लेकिन मुझे उम्मीद है कि यह "ऐसा न करें" कहने से अधिक उपयोगी होगा:

आईपैड मिनी का पता लगाने के बजाय, यह पता क्यों नहीं लगा कि उपयोगकर्ता को नियंत्रण में कठिनाई हो रही है (या: लगातार नियंत्रण के एक उपनगरीय में मार रहा है), और उन्हें समायोजित करने के लिए नियंत्रण के आकार को बढ़ा / घटाएं?

जिन उपयोगकर्ताओं को बड़े नियंत्रण की आवश्यकता होती है उन्हें हार्डवेयर की परवाह किए बिना मिलता है; जिन उपयोगकर्ताओं को बड़े नियंत्रण की आवश्यकता नहीं है और अधिक सामग्री देखना चाहते हैं, उन्हें भी प्राप्त करें। यह सिर्फ हार्डवेयर का पता लगाने के समान आसान नहीं है, और कुछ सूक्ष्म चीजें सही होने के लिए होंगी, लेकिन अगर यह सावधानी से किया गया तो यह वास्तव में अच्छा हो सकता है।


यह मुझे फिल्म Equilibrium से एक उद्धरण की याद दिलाता है:

"क्या आप कहेंगे, एक हथियार को ग्रामेटोन क्लरिक से दूर करने का सबसे आसान तरीका है?"

"आप उससे इसके लिए पूछते हैं।"

हम समाधान के लिए लड़ने के लिए इतने प्रयोग में रहते हैं, कभी-कभी, पूछना बेहतर हो सकता है। (अच्छे कारण हैं कि हम आमतौर पर ऐसा नहीं करते हैं, लेकिन यह हमेशा एक विकल्प होता है।) यहां सभी सुझाव शानदार हैं, लेकिन एक सरल समाधान यह हो सकता है कि आपका प्रोग्राम यह पूछे कि वे कौन से आईपैड का उपयोग कर रहे हैं जब वे इसे शुरू करते हैं ।

मुझे पता है कि यह एक प्रकार का गालिया जवाब है, लेकिन मुझे उम्मीद है कि यह एक अनुस्मारक है कि हमें सब कुछ के लिए लड़ना नहीं है। (मैंने खुद को डाउनवॉट्स के लिए मजबूर कर दिया है।: पी)

कुछ उदाहरण:

  • ओएस इंस्टॉलेशन के दौरान कीबोर्ड डिटेक्शन कभी-कभी एक विशिष्ट कीबोर्ड का पता नहीं लगा सकता है, इसलिए इंस्टॉलर से पूछना है।
  • विंडोज पूछता है कि आप जिस नेटवर्क से कनेक्ट करते हैं वह एक होम नेटवर्क या सार्वजनिक नेटवर्क है।
  • कंप्यूटर उस व्यक्ति का पता नहीं लगा सकते जो इसका उपयोग करने जा रहा है, इसलिए उन्हें उपयोगकर्ता नाम और पासवर्ड की आवश्यकता होती है।

शुभकामनाएं - मुझे आशा है कि आपको एक शानदार समाधान मिलेगा! यदि आप नहीं करते हैं, हालांकि, इसे मत भूलना।


सवाल का जवाब नहीं दे रहा है, लेकिन सवाल के पीछे सवाल है:

Your goal is to improve the user experience on a smaller screen. The appearance of the UI controls is one part of it. Another part of UX is the way the application responds.

What if you make the area that responds to taps big enough to be user friendly on the iPad Mini while keeping the visual representation of the UI controls small enough to be visually pleasing on the iPad?

If you have gathered enough taps that were not in the visual area, you can decide to visually scale the UI Controls.

As a bonus, this works for big hands on iPad as well.


अद्यतन: ऐसा लगता है कि ये मान टैब निर्माण के समय व्यूपोर्ट चौड़ाई और ऊंचाई की रिपोर्ट कर रहे हैं, और वे रोटेशन पर नहीं बदलते हैं, इसलिए डिवाइस का पता लगाने के लिए इस विधि का उपयोग नहीं किया जा सकता है !

आप या तो screen.availWidth उपयोग कर सकते हैं। screen.availWidth या screen.availHeight क्योंकि वे आईपैड मिनी और आईपैड 2 के लिए अलग दिखते हैं।

आईपैड मिनी

screen.availWidth = 768
screen.availHeight = 1004

आईपैड 2

screen.availWidth = 748
screen.availHeight = 1024

स्रोत: konstruktors.com/blog/web-design/…


संपादित करें 1: मेरा मूल उत्तर, नीचे "यह नहीं करता" था। सकारात्मक होने के हित में:

असली सवाल, मुझे लगता है कि आईपैड एक्स बनाम आईपैड मिनी के साथ कुछ लेना देना नहीं है। मुझे लगता है कि यह यूआई तत्व आयामों और उपयोगकर्ता के ergonomics के लिए नियुक्ति अनुकूलित करने के बारे में है। अपने यूआई तत्व आकार बदलने और शायद, स्थिति निर्धारण करने के लिए आपको उपयोगकर्ता की उंगली / एस के आकार को निर्धारित करने की आवश्यकता है। यह, फिर से, वास्तव में यह जानने के लिए पहुंचाया जाना चाहिए कि आप किस डिवाइस पर चल रहे हैं। चलो अतिरंजित करें: आपका ऐप 40 इंच विकर्ण स्क्रीन पर चल रहा है। मेक और मॉडल या डीपीआई को नहीं जानते। आप नियंत्रण कैसे आकार देते हैं?

आपको साइट / गेम में गेटिंग तत्व वाला बटन प्रदर्शित करने की आवश्यकता है। यह तय करने के लिए मैं इसे कहां छोड़ दूंगा कि यह कहां या कैसे समझ में आता है।

जबकि उपयोगकर्ता इसे एक बटन के रूप में देखेगा, असल में यह छोटे कसकर पैक किए गए बटनों के मैट्रिक्स से बना होगा जो दृश्यमान रूप से एक बटन छवि के रूप में दिखाई देने के लिए कवर किया गया है। 400 बटनों से बने 100 x 100 पिक्सेल बटन की कल्पना करें, प्रत्येक 5 x 5 पिक्सेल। आपको यह देखने के लिए प्रयोग करने की ज़रूरत है कि यहां क्या समझ में आता है और आपके नमूने को कितना छोटा होना चाहिए।

बटन सरणी के लिए संभावित सीएसएस:

.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;
} 

और परिणामी सरणी:

जब उपयोगकर्ता बटन सरणी को छूता है तो आप प्रभावी रूप से उपयोगकर्ता की उंगली के संपर्क क्षेत्र की एक छवि प्राप्त करेंगे। इसके बाद आप जो भी मानदंड चाहते हैं (संभवतः अनुभवजन्य व्युत्पन्न) का उपयोग कर सकते हैं ताकि आप उन संख्याओं के सेट पर पहुंच सकें जिनका उपयोग आप अपनी आवश्यकताओं के अनुसार विभिन्न यूआई तत्वों को स्केल और स्थिति में कर सकते हैं।

इस दृष्टिकोण की सुंदरता यह है कि अब आप इस बात पर ध्यान नहीं देते कि आप किस डिवाइस का नाम या मॉडल से निपट सकते हैं। डिवाइस के संबंध में उपयोगकर्ता की उंगली का आकार आप की देखभाल करते हैं।

मैं कल्पना करता हूं कि एप्लिकेशन में प्रवेश प्रक्रिया के हिस्से के रूप में यह sense_array बटन छुपाया जा सकता है। उदाहरण के लिए, यदि यह एक गेम है, तो शायद "प्ले" बटन या उपयोगकर्ता के नाम के साथ विभिन्न बटन या इसका चयन करने के साधन हैं कि वे किस स्तर पर खेलेंगे, आदि। आपको यह विचार मिलता है। Sense_array बटन गेम में आने के लिए उपयोगकर्ता को कहीं भी स्पर्श कर सकता है।

संपादित करें 2: बस ध्यान दें कि आपको शायद उन कई बटनों की आवश्यकता नहीं है। सांद्रिक मंडलियों या बटनों का एक सेट एक विशाल तारांकन की तरह व्यवस्थित * बस ठीक हो सकता है। आपको प्रयोग करना है।

मेरे पुराने उत्तर के साथ, नीचे, मैं आपको सिक्का के दोनों तरफ दे रहा हूं।

पुराना उत्तर:

सही जवाब है: ऐसा मत करो। यह एक बुरा विचार है।

यदि आपके बटन इतने छोटे हैं कि वे मिनी पर अनुपयोगी हो जाते हैं तो आपको अपने बटन को बड़ा बनाने की आवश्यकता होती है।

अगर मैंने मूल आईओएस ऐप्स करने में कुछ भी सीखा है, तो यह है कि ऐप्पल को बाहर निकालने का प्रयास करना अवांछित दर्द और उत्तेजना के लिए एक सूत्र है। अगर उन्होंने आपको डिवाइस की पहचान करने की अनुमति नहीं दी है, तो, क्योंकि, उनके सैंडबॉक्स में, आपको नहीं करना चाहिए।

मुझे आश्चर्य है, क्या आप पोर्ट्रेट बनाम परिदृश्य में आकार / स्थान समायोजित कर रहे हैं?


Based on Douglas question about new webkitAudioContext().destination.numberOfChannels on iPad 2 I decided to run some tests.

Checking numberOfChannels returned 2 on iPad mini but nothing on iPad 2 with iOS 5 and 2 as well with iOS 6.

Then I tried to check if webkitAudioContext is available

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

Same here iPad Mini and iPad 2 with iOS 6 returns true while iPad 2 with iOS 5 returns false.

(This test don't work on desktop, for desktop check if webkitAudioContext is a function).

Here's the code for you to try out: http://jsfiddle.net/sqFbc/


I am detecting the iPad mini by creating a canvas that is larger an iPad mini can render , filling a pixel then reading the color back out. The iPad mini reads the color as '000000'. everything else is rendering it as the fill color.

Partial code:

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);

I need this for canvas sizing so it's feature detection in my use case.


Not tested, but instead of playing an audio file and check the balance, it could work to listen to the microphone, extract the background noise, and compute its "color" (frequency graph). If IPad Mini has a different microphone model than IPad 2, then their background color should be measurably different and some audio fingerprinting techniques might help you tell which device is in use.

I don't seriously think it could be feasible and worth the hassle in this specific case, but I think fingerprinting the background noise could be used in some apps, for example to tell you where you are when you are inside a building.


What if you created a bunch of 1"x1" wide divs and appended them one by one to a parent div until the bounding box jumped from 1 inch to 2 inches? An inch on the mini is the same size as an inch on the iPad, right?





svg