it-swarm.dev

كشف iPad Mini في HTML5

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

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

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

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

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

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

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

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

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

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

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

376
Martin Kool

قم بتشغيل ملف صوتي استريو وقارن استجابة مقياس التسارع عندما تكون وحدة التخزين عالية على القناة اليمنى وعلى القناة اليسرى - يحتوي iPad2 على مكبرات صوت أحادية بينما يحتوي iPad Mini على مكبرات صوت ستيريو مدمجة.

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

253
Avi Marcus

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

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

باد ميني

screen.availWidth = 768
screen.availHeight = 1004

باد 2

screen.availWidth = 748
screen.availHeight = 1024

المصدر: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/

132
Kaspars

أنا أفهم أن هذا قد يكون حلاً منخفض التقنية بعض الشيء ، ولكن نظرًا لأنه لا يمكننا أن نتوصل إلى أي شيء آخر بعد ..

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

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

// 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 mini أو iPad 2 على الأقل ، فسيكون موقع الويب قابلاً للاستخدام مع أجهزة iPad المصغرة التي تفعل شيئًا كهذا.

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

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

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

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

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

"

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

84
flexd

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

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

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

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

74
Alessandro Piatti

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

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

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

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

69
Mr. Berna

اطلب من المستخدم إسقاط جهاز iPad من عدة آلاف من الأقدام فوق الأرض. ثم استخدم مقياس التسارع الداخلي لقياس الوقت الذي يستغرقه جهاز iPad للوصول إلى السرعة النهائية. يتمتع جهاز iPad الأكبر بمعامل جر أكبر ويجب أن يصل إلى سرعة الطرف في وقت أقل من iPad Mini .

فيما يلي بعض نماذج التعليمات البرمجية للبدء.

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

من المؤكد أنك تحتاج إلى إعادة زيارة هذا الرمز عندما تقوم Apple بإصدار iPad التالي بشكل حتمي في عامل شكل مختلف. لكنني متأكد من أنك ستظل على رأس الأمور وستحتفظ بهذا الاختراق لكل إصدار جديد من iPad.

31
Jason

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

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

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

28
BenM

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

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

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

26
Assaf Lavie

حسنًا ، يتمتع 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 * iPadMiniTotalLevel. أيهما أقرب إلى عدد صحيح سيشير إلى الجهاز الذي يتم استخدامه.

آسف على عدد ifs في هذه الإجابة! نأمل أن يأتي شيء أفضل.

20
Douglas

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

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

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

بينما يرى المستخدم هذا كزر واحد ، في الواقع سيتكون من مصفوفة من الأزرار الصغيرة المحزومة بإحكام والتي يتم تغطيتها بصريا لتظهر كصورة زر واحدة. تخيل زر 100 × 100 بكسل يتكون من 400 زر ، كل 5 × 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;
} 

ومجموعة الناتجة:

button array

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

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

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

تحرير 2: فقط الإشارة إلى أنك ربما لا تحتاج إلى العديد من أزرار الشعور. قد تكون مجموعة من الدوائر أو الأزرار متحدة المركز مرتبة مثل العلامة النجمية الكبيرة * جيدة. عليك أن تجرب.

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

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

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

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

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

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

18
martin's

ماذا عن المعيار الصغير ، احسب شيئًا ما يستغرق تقريبًا X ميكروثانية على iPad 2 و Y sec على iPad mini.

ربما لا تكون دقيقة بدرجة كافية ، ولكن قد يكون هناك بعض التعليمات التي تكون رقاقة iPad mini أكثر كفاءة فيها.

11
Les

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

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

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

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 لاختبارها.

11
lc0

اطلب من جميع المستخدمين مع وكيل مستخدم iPad2 توفير صورة باستخدام الكاميرا المدمجة واكتشاف الدقة باستخدام HTML File API . ستكون صور iPad Mini عالية الدقة بسبب التحسينات في الكاميرا.

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

8
Vlad Magdalin

هل يمكن أن تسأل دائما المستخدم؟!

إذا لم يتمكن المستخدم من رؤية الأزرار أو المحتوى ، فامنحه طريقة لإدارة التحجيم بأنفسهم. يمكنك دائمًا إنشاء بعض أزرار القياس إلى الموقع لتكبير/تصغير المحتوى (النص/الأزرار). سيتم ضمان هذا (تقريبًا) للعمل على أي قرار iPad حالي وربما أي قرار مستقبلي تقرر Apple اتخاذه.

7
TK.

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

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

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

6
Stephen Canon

هذا يذكرني باقتباس من فيلم Equilibrium:

"ما هو ، في رأيك ، أسهل طريقة للحصول على سلاح بعيدًا عن رجل دين نحوي؟"

"أنت تسأل عنه".

نحن معتادون على القتال من أجل الحلول ، وفي بعض الأحيان ، قد يكون من الأفضل طرح السؤال. (هناك أسباب وجيهة لأننا عادةً لا نفعل ذلك ، لكنه دائمًا خيار.) جميع الاقتراحات هنا رائعة ، ولكن قد يكون الحل البسيط هو أن يطلب برنامجك من جهاز iPad الذي يستخدمه عند بدء تشغيله. .

أعلم أن هذا نوع من الإجابة الصافية ، لكنني آمل أن يكون هذا تذكيرًا بأنه لا يتعين علينا القتال من أجل كل شيء. (لقد استعدت نفسي ل downvotes.: P)

بعض الأمثلة:

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

حظا سعيدا - أتمنى أن تجد حلا رائعا! إذا لم تقم بذلك ، فلا تنس هذا.

6
jedd.ahyoung

لا تجيب على السؤال ، ولكن السؤال وراء السؤال:

هدفك هو تحسين تجربة المستخدم على شاشة أصغر. مظهر عناصر تحكم واجهة المستخدم هو جزء واحد منه. جزء آخر من UX هو الطريقة التي يستجيب بها التطبيق.

ماذا لو جعلت المنطقة التي تستجيب للصنابير كبيرة بما يكفي لتكون سهل الاستخدام على iPad Mini مع الحفاظ على التمثيل المرئي لعناصر التحكم في واجهة المستخدم صغيرًا بما يكفي ليكون مرئيًا على iPad؟

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

على سبيل المكافأة ، هذا يعمل للأيدي الكبيرة على iPad أيضًا.

5
Laurens

جميع الحلول هنا ليست دليلًا على المستقبل (ما يمنع شركة Apple من إطلاق جهاز iPad بنفس حجم الشاشة مثل جهاز iPad 2 ولكن نفس دقة جهاز iPad Mini). لذا توصلت إلى فكرة:

قم بإنشاء div بعرض 1 بوصة وإلحاقه بالجسم. ثم أقوم بإنشاء div أخرى بعرض 100٪ وألحقها بالجسم:

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

تقوم دالة jQuery width () دائمًا بإرجاع القيم بالبكسل حتى تتمكن من:

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

حجم الشاشة الآن يحتفظ بالحجم متوفر للتطبيق بوصة (حذار من تقريب التآكل). يمكنك استخدام ذلك لوضع واجهة المستخدم الرسومية بالطريقة التي تريدها. لا تنسَ أيضًا إزالة divs عديمة الفائدة بعد ذلك.

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

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

EDIT: استخدم هذا الرمز للتحقق مما إذا كان يعمل بالفعل على جهازك. لا أملك أي أجهزة iPad لاختباره.

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

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

EDIT2: اتضح أن الصفحة التي اختبرتها بها تحتوي على بعض المتعارضة CSS . أنا ثابت رمز الاختبار للعمل بشكل صحيح الآن. تحتاج إلى وضع: مطلق على divs حتى تتمكن من استخدام الارتفاع في٪.

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

5
Hoffmann

بناءً على دوغلاس سؤال حول new webkitAudioContext().destination.numberOfChannels على iPad 2 قررت تشغيل بعض الاختبارات.

التحقق من عدد القنوات عاد 2 على iPad mini ولكن لا شيء على iPad 2 مع iOS 5 و 2 وكذلك مع iOS 6.

ثم حاولت التحقق من توفر webkitAudioContext

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

نفس الشيء هنا ، يعود iPad Mini و iPad 2 مع iOS 6 بشكل صحيح ، بينما يعود iPad 2 مع iOS 5 كاذب.

(هذا الاختبار لا يعمل على سطح المكتب ، للتحقق من سطح المكتب إذا كانت webkitAudioContext وظيفة).

إليك الرمز الذي يمكنك تجربته: http://jsfiddle.net/sqFbc/

2
Alfred

لم يتم اختباره ، ولكن بدلاً من تشغيل ملف صوت والتحقق من التوازن ، يمكن أن يعمل على الاستماع إلى الميكروفون ، واستخراج ضوضاء الخلفية ، وحساب "لونه" (الرسم البياني للتردد). إذا كان لدى IPad Mini نموذج ميكروفون مختلف عن IPad 2 ، فيجب أن يكون لون الخلفية مختلفًا بشكل ملموس ، وقد تساعدك بعض تقنيات البصمات الصوتية في تحديد الجهاز المستخدم.

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

2
gb.

في iOS7 ، يمكن لمستخدم الإعداد على مستوى النظام أن يعدل: عندما تصبح الأمور أصغر من أن تقرأ ، يمكن تغيير حجم النص الإعداد.

يمكن استخدام حجم النص هذا لتكوين واجهة مستخدم ذات أبعاد معقولة ، على سبيل المثال للحصول على زر (تم اختباره على iPad Mini Retina للرد على تغييرات إعداد حجم النص):

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

( نموذج زر CSS ، بفضل jsfiddle و cssbuttongenerator)

2
Srg

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

2
Scovetta

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

كود جزئي:

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

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

1
SystemicPlural