javascript - اكتشف iPad Mini في HTML5




svg (16)

أعلم أن هذا حل فظيع ، ولكن في الوقت الحالي فإن الطريقة الوحيدة للتمييز بين جهاز iPad Mini و iPad 2 هي التحقق من رقم البناء الخاص به ورسم خريطة لكل رقم بناء مع الجهاز ذي الصلة.

دعوني 10A406 لكم مثالاً على ذلك: iPad mini ، الإصدار 6.0 ، يعرض " 10A406 " كرقم للبناء ، بينما يعرض iPad 2 " 10A5376e ".

يمكن الحصول على هذه القيمة بسهولة من خلال regex على وكيل المستخدم ( window.navigator.userAgent ) ؛ هذا الرقم مسبوق بـ " Mobile/ ".

للأسف هذه هي الطريقة الوحيدة التي لا لبس فيها للكشف عن أي باد ميني. أقترح اعتماد نهج متعلق viewport (حيثما يكون مدعومًا ، باستخدام وحدات vh / vw) لعرض المحتويات بشكل صحيح على أحجام مختلفة للشاشة.

آيباد ميني من أبل هو نسخة مصغرة من جهاز آيباد 2 بأكثر مما نرغب. في JavaScript ، يعرض كائن window.navigator نفس القيم لـ Mini و iPad 2. اختباراتي حتى الآن لاكتشاف الفرق لم تؤد إلى النجاح.

لماذا هذا مهم؟

بما أن شاشتي iPad Mini و iPad 2 متطابقتين بالبكسل ، لكنهما يختلفان في الحجم الفعلي (بوصة / سم) ، فإنهما يختلفان في PPI (بكسل لكل بوصة).

بالنسبة لتطبيقات الويب والألعاب التي تقدم واجهة مستخدم سهلة الاستخدام ، يتم ضبط بعض العناصر من حيث الحجم بالنسبة إلى وضع الإبهام أو الإصبع للمستخدم ، وبالتالي قد نحتاج إلى قياس بعض الصور أو الأزرار لتوفير تجربة أفضل للمستخدم.

الأشياء التي جربتها حتى الآن (بما في ذلك بعض الأساليب الواضحة):

  • window.devicepixelratio
  • عرض عنصر CSS بوحدة cm
  • استعلامات وسائط CSS (مثل resolution و -webkit-device-pixel-ratio )
  • رسومات SVG في وحدات مماثلة
  • القيام بكافة أنواع عمليات تحويل webkit CSS لوقت محدد وإحصاء الإطارات التي تم تقديمها مع requestAnimFrame (كنت أتمنى اكتشاف فرق قابل للقياس)

أنا جديد من الأفكار. ماذا عنك؟

تحديث شكرا على الردود حتى الآن. أود أن أعلق على الأشخاص الذين يصوتون ضد الكشف عن جهاز iPad mini مقابل الرقم 2 نظرًا لأن Apple لديها برنامج uhm ، وهو أحد المبادئ التوجيهية لحكمهم جميعًا. حسنًا ، إليك سبب تفكيري لماذا أشعر أنه من المنطقي حقًا في العالم معرفة ما إذا كان الشخص يستخدم جهاز iPad mini أو جهازًا آخر. 2. وفعل مع تفكيري لما تحبه.

جهاز iPad mini ليس مجرد جهاز أصغر بكثير (9.7 بوصة مقابل 7.9 بوصة) ، ولكن عامل التصميم الخاص به يسمح باستخدام مختلف. عادةً ما يتم تثبيت iPad 2 بيدين عند اللعب ما لم تكن تشاك نوريس . الصغير هو أصغر ، ولكنه أخف كثيرًا أيضًا ويسمح بطريق اللعب حيث تمسك به في يد واحدة ويستخدم آخرًا للتمرير السريع أو النقر أو غير ذلك. كمصمّم ومطوّر ألعاب بنفسي ، أود فقط أن أعرف ما إذا كان صغيرًا حتى أتمكن من اختيار تزويد اللاعب بمجموعة تحكم مختلفة إذا أردت (على سبيل المثال بعد اختبار A / B مع مجموعة من اللاعبين).

لماذا ا؟ حسنًا ، لقد أثبتت حقيقة أن غالبية المستخدمين يميلون إلى استخدام الإعدادات الافتراضية ، لذا تركوا وضع الإبهام الافتراضي ووضع بعض عناصر التحكم الأخرى على الشاشة (فقط أعطوا مثالًا عشوائيًا هنا) عندما يحمّل اللاعب اللعبة لأول مرة هو ما أنا ، وربما مصممي اللعبة الأخرى ، أحب أن تكون قادرة على القيام به.

لذلك فإن IMHO يتجاوز ذلك النقاشات حول الأصابع / المبادئ التوجيهية السميكة وهو ما يجب على Apple وكل البائعين الآخرين القيام به: السماح لنا بتعريف جهازك بشكل فريد والتفكير بشكل مختلف بدلاً من اتباع الإرشادات.


أفهم أن هذا قد يكون حلًا قليل التقنية ، ولكن بما أننا لا نستطيع التفكير في أي شيء آخر بعد ..

أفترض أنك تحقق بالفعل من معظم الأجهزة الأخرى ، لذلك أرى السيناريوهات التالية ممكنة.

يمكنك التحقق من وجود جميع الأجهزة الأكثر شيوعًا المحتملة التي تتطلب CSS / sizing خاص ، وإذا كانت تتطابق مع أي من هذه الأجهزة ، إما أن تفترض أنها جهاز iPad صغير أو ببساطة اسأل المستخدم؟

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

أعلم أنه قد يبدو وكأنه أسلوب غبي في الوقت الحالي ، ولكن إذا لم يكن لدينا حاليًا أي طريقة لتحديد ما إذا كان الجهاز هو جهاز iPad صغير أم جهاز iPad 2 ، فسيكون موقع الويب قابلاً للاستخدام مع أجهزة iPad الصغيرة التي تقوم بشيء كهذا.

يمكنك حتى الذهاب مع شيء من هذا القبيل:

"لإعطائك أفضل تجربة تصفح ممكنة ، نحاول اكتشاف نوع جهازك لتخصيص موقع الويب على جهازك. للأسف نظرًا للقيود ، هذا ليس دائمًا ممكنًا ولا يمكننا حاليًا تحديد ما إذا كنت تستخدم جهاز iPad 2 أو iPad مصغرة باستخدام هذه الأساليب.

للحصول على أفضل تجربة تصفح ممكنة ، يرجى تحديد الجهاز الذي تستخدمه أدناه.

سيتم تخزين هذا الاختيار للزيارات المستقبلية إلى موقع الويب على هذا الجهاز.

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

"

لست مألوفًا تمامًا بما يمكنك فعله وما لا يمكن فعله من جانب العميل في جافا سكريبت. أعلم أنه يمكنك الحصول على عنوان IP الخاص بالمستخدم ، ولكن هل من الممكن الحصول على عنوان MAC الخاص بالمستخدم؟ هل تختلف هذه النطاقات بين أجهزة iPad2 و iPad mini؟


حسنًا ، يملك كل من iPad 2 و iPad Mini بطاريات مختلفة الحجم.

إذا كان نظام التشغيل iOS 6 يدعم ذلك ، يمكنك الحصول على مستوى البطارية الحالي من 0.0..1.0 باستخدام window.navigator.webkitBattery.level . في مستوى ما ، سواء في الأجهزة أو البرامج ، يحسب ذلك على الأرجح على أنه CurrentLevel / TotalLevel ، حيث يكون كلاهما من النتوءات. إذا كان الأمر كذلك ، فإن ذلك سيؤدي إلى تعويم وهو مضاعف لـ 1 / TotalLevel . إذا كنت تأخذ الكثير من قراءات مستوى البطارية من كلا الجهازين ، وقمت بحساب battery.level * n فقد تتمكن من العثور على قيمة n حيث تبدأ جميع النتائج قريبة من الأعداد الصحيحة ، والتي ستعطيك iPad2TotalLevel و iPadMiniTotalLevel .

إذا كان هذان الرقمان مختلفان ، battery.level * iPad2TotalLevel بشكل متبادل ، ففي الإنتاج يمكنك حساب battery.level * iPad2TotalLevel و battery.level * iPadMiniTotalLevel . أيهما أقرب إلى عدد صحيح سيشير إلى الجهاز الجاري استخدامه.

عذرا عن عدد ifs في هذا الجواب! نأمل أن يأتي شيء أفضل على طول.


عدم الإجابة عن السؤال ، ولكن السؤال وراء السؤال:

هدفك هو تحسين تجربة المستخدم على شاشة أصغر. 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.


لا تعوض الفرق بين iPad mini و iPad 2 إلا إذا كنت ستعوض أيضًا بين الأصابع الدهنية والنحافة.

يبدو أن شركة Apple تحاول بشكل متعمد عدم السماح لك بإخبار الفرق. يبدو أن شركة آبل لا تريد منا أن نكتب رمزًا مختلفًا للإصدارات ذات الأحجام المختلفة لأجهزة iPad. لا أكون جزءًا من شركة أبل ، لا أعرف هذا بالتأكيد ، أنا فقط أقول أن هذا هو ما يبدو. ربما ، إذا كان مجتمع المطورين قد توصل إلى جهاز كشف خيالي لـ minis iPad ، فإن Apple قد تتعمد كسر هذا الكاشف في الإصدارات المستقبلية من iOS. تريد Apple منك تعيين الحد الأدنى لحجم الهدف إلى 44 نقطة iOS ، وسوف تعرض iOS ذلك بحجمين ، حجم iPad الأكبر والحجم الأصغر لجهاز iPhone / iPad. 44 نقطة سخية للغاية ، وسيعرف مستخدموك بالتأكيد ما إذا كانوا على جهاز iPad الأصغر ، لذا يمكنهم التعويض من تلقاء أنفسهم.

أقترح الرجوع إلى السبب المعلن لطلب الكاشف: تعديل حجم الهدف لراحة المستخدم. من خلال تحديد التصميم لحجم واحد على جهاز iPad الكبير وحجم آخر على iPad صغير ، فإنك تقرر أن جميع الأشخاص لديهم نفس حجم الأصابع. إذا كان تصميمك ضيقًا بما فيه الكفاية ، فإن الفرق في الحجم من جهاز iPad 2 وجهاز iPad mini يصنع فارقًا ، فإن حجم الأصابع بيني وبين زوجتي سيحدث فرقًا أكبر. لذا قم بتعويض حجم إصبع المستخدم ، وليس طراز iPad.

لدي اقتراح حول كيفية قياس حجم الإصبع. أنا مطور iOS الأصلي ، لذلك لا أعرف ما إذا كان يمكن تحقيق ذلك في HTML5 ، ولكن إليك كيفية قياس حجم الإصبع في تطبيق أصلي. أود أن أضغط على المستخدم معًا ، ثم نقيس مدى قربهما من بعضهما. سوف تقترب الأصابع الأصغر من الأشياء ، ويمكنك استخدام هذا القياس لاشتقاق عامل التحجيم. هذا يضبط تلقائيا لحجم باد. سيكون للشخص نفسه قياس أكبر على نقاط الشاشة على جهاز iPad mini مقارنةً بجهاز iPad 2. بالنسبة إلى لعبة ، يمكنك تسمية هذه الخطوة بالمعايرة ، أو حتى عدم استدعائها. هل لديك كخطوة انطلاق. على سبيل المثال في لعبة إطلاق النار وضع اللاعب الذخيرة في البندقية بحركة معسرّة.


للأسف ، في الوقت الحالي يبدو أن هذا غير ممكن: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

قبل يومين ، لقد قمت بالتغريد عن أول مشكلة تم اكتشافها: " تم التأكد من أن وكيل مستخدم Mini iPad هو نفسه جهاز iPad 2 ". لقد تلقيت فعليًا المئات من الإجابات التي تقول إن عامل شم الاستنشاق المستخدم هو ممارسة سيئة ، وأنه يجب علينا اكتشاف ميزات لا أجهزة ، إلخ ، إلخ.

حسناً ، نعم يا شباب ، أنت على حق ، لكن ليس لها علاقة مباشرة بالمشكلة. وأحتاج إلى إضافة الأخبار السيئة الثانية: لا توجد تقنية من جانب العميل لجعل "اكتشاف الميزة" لا .


مطالبة جميع المستخدمين باستخدام وكيل مستخدم iPad2 لتوفير صورة باستخدام الكاميرا المدمجة واكتشاف الدقة باستخدام واجهة برمجة تطبيقات ملف HTML . ستكون صور iPad Mini أعلى دقة نظرًا للتحسينات في الكاميرا.

يمكنك أيضًا التلاعب بإنشاء عنصر قماش غير مرئي وتحويله إلى PNG / JPG باستخدام واجهة برمجة تطبيقات Canvas. ليس لدي أي طريقة لاختباره ، ولكن قد تكون البتات الناتجة مختلفة بسبب خوارزمية الضغط الأساسية وكثافة البكسل في الجهاز.


نعم ، إنها نقطة جيدة للتحقق من الجيروسكوب. يمكنك القيام بذلك بسهولة

http://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html

أو شيء من هذا القبيل

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;

}

لا تملك أي أجهزة iPad لاختبارها.


هذه لقطة برية ، لكن أحد الاختلافات بين iPad 2 و iPad mini هو أن الأول ليس لديه جيروسكوب ثلاثي المحاور. قد يكون من الممكن استخدام واجهة برمجة التطبيقات لتوجيه جهاز WebKit لمعرفة نوع المعلومات التي يمكنك الحصول عليها منها.

على سبيل المثال ، يبدو أن هذه الصفحة تشير إلى أنه لا يمكنك الحصول إلا على قيمة rotationRate إذا كان الجهاز يحتوي على جيروسكوب.

عذرًا ، لا أستطيع إعطاء POC عاملة - لا يمكنني الوصول إلى جهاز iPad mini. ربما يمكن للشخص الذي يعرف أكثر قليلاً عن واجهات برمجة التطبيقات هذه التوجه أن يتناغم هنا.


هذه ليست إجابة لسؤالك كما هي ، ولكن آمل أن يكون أكثر فائدة من قول "لا تفعل ذلك":

فبدلاً من اكتشاف جهاز iPad Mini ، لماذا لا نكتشف أن المستخدم يواجه صعوبة في ضرب عنصر التحكم (أو: يضرب باستمرار في منطقة فرعية من التحكم) ، وينمو / ينكمش حجم عنصر التحكم لاستيعابهم؟

المستخدمون الذين يحتاجون إلى عناصر تحكم أكبر يحصلون عليها بغض النظر عن الأجهزة ؛ المستخدمين الذين لا يحتاجون إلى ضوابط أكبر ويرغبون في رؤية المزيد من المحتوى يحصلون عليها أيضًا. انها ليست بسيطة مثل مجرد الكشف عن الأجهزة ، وسوف تكون هناك بعض الأشياء الخفية للحصول على حق ، ولكن إذا تم القيام به بعناية يمكن أن يكون لطيفا حقا.


EDIT 1: إجابتي الأصلية ، أدناه ، كانت "لا تفعلها". في صالح كونها إيجابية:

السؤال الحقيقي ، على ما أظن ، لا علاقة له ب iPad X vs. iPad mini. أعتقد أن الأمر يتعلق بتحسين أبعاد عنصر واجهة المستخدم وموضعه إلى بيئة العمل الخاصة بالمستخدم. يجب تحديد حجم إصبع المستخدم / ق من أجل تحجيم عنصر واجهة المستخدم الخاص بك ، وربما ، وتحديد المواقع. هذا ، مرة أخرى ، وربما ينبغي الوصول إليه دون الحاجة إلى معرفة ما الجهاز الذي تقوم بتشغيله بالفعل. دعونا نبالغ: يتم تشغيل التطبيق الخاص بك على شاشة قطرية 40 بوصة. لا تعرف الماركة والطراز أو DPI. كيف تقوم بتحكم عناصر التحكم؟

تحتاج إلى عرض زر هو عنصر gating في الموقع / اللعبة. سأترك الأمر لك لتقرر أين أو كيف يكون من المنطقي القيام بذلك.

في حين أن المستخدم سوف يرى هذا كزر واحد ، في الواقع سوف يتكون من مصفوفة من الأزرار الصغيرة المحزومة بإحكام والتي يتم تغطيتها بصريا لتظهر كصورة زر واحدة. تخيل زرًا بحجم 100 × 100 بكسل يتألف من 400 زر ، كل 5 × 5 بكسل. تحتاج إلى تجربة لترى ما هو المعقول هنا وكيف يجب أن تكون العينة الخاصة بك صغيرة.

ممكن CSS لصفيف زر:

.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: مجرد الإشارة إلى أنك ربما لا تحتاج إلى أن العديد من أزرار الحس. مجموعة من الدوائر أو الأزرار متحدة المركز مثل النجمة الضخمة * قد تفعل ما يرام. عليك أن تجرب.

مع جوابي القديم ، أدناه ، أعطيكم جانبي العملة.

الإجابة القديمة:

الجواب الصحيح هو: لا تفعل هذا. إنها فكرة سيئة.

إذا كانت الأزرار الخاصة بك صغيرة جدًا بحيث تصبح غير قابلة للاستخدام على ميني ، فإنك تحتاج إلى زيادة حجم الأزرار.

إذا تعلمت أي شيء على الإطلاق في تنفيذ تطبيقات iOS الأصلية ، فإن محاولة غض الطرف عن أبل هي صيغة للألم والتأزم اللذين لا داعي لهما. إذا اختاروا عدم السماح لك بالتعرف على الجهاز فذلك لأن ، في صندوق الرمل الخاص بهم ، لا يجب عليك.

أتساءل ، هل تقوم بتعديل حجم / موقع في صورة مقابل المناظر الطبيعية؟


تحديث: يبدو أن هذه القيم تبلغ عن عرض إطار العرض وارتفاعه في وقت إنشاء علامة التبويب ، ولا تتغير عند الدوران ، لذلك لا يمكن استخدام هذه الطريقة للكشف عن الأجهزة !

يمكنك استخدام إما screen.availWidth أو screen.availHeight حيث يبدو أنها مختلفة لـ iPad Mini و iPad 2.

iPad Mini

screen.availWidth = 768
screen.availHeight = 1004

باد 2

screen.availWidth = 748
screen.availHeight = 1024

المصدر: konstruktors.com/blog/web-design/…


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