ตรวจหา iPad Mini ใน HTML5

Apple iPad Mini เป็น iPad 2 ที่มีขนาดเล็กกว่าในแบบที่เราต้องการ ใน JavaScript window.navigatorวัตถุแสดงค่าเดียวกันสำหรับ Mini และ iPad 2 การทดสอบของฉันจนถึงการตรวจสอบความแตกต่างไม่ได้นำไปสู่ความสำเร็จ

ทำไมสิ่งนี้จึงสำคัญ

เนื่องจากหน้าจอ iPad Mini และ iPad 2 เหมือนกันเป็นพิกเซล แต่แตกต่างกันไปตามขนาดจริง (นิ้ว / เซนติเมตร) ดังนั้นจึงแตกต่างกันไปในPPI (พิกเซลต่อนิ้ว)

เพื่อให้เว็บแอปพลิเคชันและเกมมีส่วนต่อประสานกับผู้ใช้ที่เป็นมิตรองค์ประกอบบางอย่างจะถูกปรับขนาดเทียบกับตำแหน่งนิ้วหัวแม่มือหรือนิ้วมือของผู้ใช้ดังนั้นเราอาจต้องการปรับขนาดรูปภาพหรือปุ่มบางอย่างเพื่อให้ประสบการณ์การใช้งานที่ดียิ่งขึ้น

สิ่งที่ฉันได้ลองมาแล้ว (รวมถึงวิธีการที่ชัดเจนบางอย่าง):

• window.devicepixelratio
• ความกว้างองค์ประกอบ CSS หน่วยเซนติเมตร
• ข้อความค้นหาสื่อ CSS (เช่นresolutionและ-webkit-device-pixel-ratio)
• ภาพวาด SVG ในหน่วยที่คล้ายกัน
• การทำ CSS webkit แปลงทุกประเภทตามเวลาที่กำหนดและนับเฟรมที่แสดงผลด้วยrequestAnimFrame(ฉันหวังว่าจะตรวจสอบความแตกต่างที่วัดได้)

ฉันสดจากความคิด แล้วคุณล่ะ?

อัปเดต ขอบคุณสำหรับคำตอบ ฉันต้องการแสดงความคิดเห็นเกี่ยวกับผู้ที่ลงคะแนนตรวจสอบ iPad mini กับ 2 เนื่องจาก Apple มี uhm แนวทางหนึ่งในการปกครองพวกเขาทั้งหมด โอเคนี่คือเหตุผลของฉันว่าทำไมฉันถึงรู้สึกว่ามันสมเหตุสมผลทุกอย่างในโลกที่จะรู้ว่าคนที่ใช้ iPad mini หรือ 2 และทำกับเหตุผลของฉันในสิ่งที่คุณชอบ

มินิ iPad ไม่เพียง แต่เป็นอุปกรณ์ที่เล็กกว่ามาก (9.7 นิ้วเทียบกับ 7.9 นิ้ว) แต่ตัวประกอบรูปแบบช่วยให้สามารถใช้งานที่แตกต่างกัน iPad 2 มักจะถูกจัดขึ้นด้วยมือทั้งสองข้างเมื่อเล่นเกมถ้าคุณกำลังเชย Norris มินินั้นเล็กกว่า แต่ก็เบากว่ามากและอนุญาตให้เล่นเกมที่คุณถือไว้ในมือเดียวแล้วใช้อีกอันเพื่อปัดหรือแตะหรืออะไรก็ตาม ในฐานะนักออกแบบเกมและผู้พัฒนาตัวเองฉันแค่อยากรู้ว่ามันเป็นมินิหรือเปล่าดังนั้นฉันสามารถเลือกที่จะให้ผู้เล่นได้รับชุดควบคุมที่แตกต่างกันถ้าต้องการ (ตัวอย่างเช่นหลังจากการทดสอบ A / B กับกลุ่มผู้เล่น)

ทำไม? มันเป็นความจริงที่พิสูจน์แล้วว่าผู้ใช้ส่วนใหญ่มักจะไปกับการตั้งค่าเริ่มต้นดังนั้นปล่อย thumbstick เสมือนและวางการควบคุม tap-based อื่น ๆ บนหน้าจอ (ให้ตัวอย่างโดยพลการที่นี่) เมื่อผู้เล่นโหลดขึ้น เกมเป็นครั้งแรกคือสิ่งที่ฉันและผู้ออกแบบเกมอื่น ๆ อาจจะชอบที่จะทำ

ดังนั้น IMHO จึงนอกเหนือไปจากการพูดคุยเรื่องแนวทาง / แนวทางหนา ๆ และเป็นเพียงสิ่งที่ Apple และผู้ค้ารายอื่น ๆ ควรทำ: อนุญาตให้เราระบุอุปกรณ์ของคุณโดยเฉพาะและคิดแตกต่างแทนแนวทางต่อไปนี้

เล่นไฟล์เสียงสเตอริโอและเปรียบเทียบการตอบสนองของ accelerometer เมื่อระดับเสียงสูงในช่องด้านขวาและด้านซ้าย - iPad2 มีลำโพงโมโนในขณะที่ iPad Mini มีลำโพงสเตอริโอในตัว

ต้องการความช่วยเหลือจากคุณในการรวบรวมข้อมูลโปรดไปที่หน้านี้และช่วยฉันรวบรวมข้อมูลสำหรับแนวคิดที่บ้าคลั่งนี้ ฉันไม่มี iPad mini ดังนั้นฉันต้องการความช่วยเหลือจากคุณ

อัปเดต: ดูเหมือนว่าค่าเหล่านี้จะรายงานความกว้างและความสูงของวิวพอร์ตในขณะที่สร้างแท็บและจะไม่เปลี่ยนแปลงตามการหมุนดังนั้นวิธีนี้ไม่สามารถใช้สำหรับการตรวจจับอุปกรณ์ได้ !

คุณสามารถใช้อย่างใดอย่างหนึ่งscreen.availWidthหรือscreen.availHeightตามที่ดูเหมือนจะแตกต่างกันสำหรับ iPad Mini และ iPad 2

ไอแพดมินิ

screen.availWidth = 768
screen.availHeight = 1004

iPad 2

screen.availWidth = 748
screen.availHeight = 1024

ที่มา: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/

ฉันเข้าใจว่านี่อาจเป็นโซลูชันที่ใช้เทคโนโลยีขั้นต่ำ แต่เนื่องจากเราไม่สามารถหาสิ่งอื่นได้อีกเลย ..

ฉันสมมติว่าคุณตรวจสอบอุปกรณ์อื่นเกือบทั้งหมดอยู่แล้วดังนั้นฉันจึงเห็นสถานการณ์ต่อไปนี้เป็นไปได้

คุณสามารถตรวจสอบอุปกรณ์ยอดนิยมที่เป็นไปได้ทั้งหมดที่ต้องใช้ CSS / การปรับขนาดพิเศษและหากไม่ตรงกับสิ่งใดที่ถือว่าเป็นมินิ 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 mini หรือ iPad 2 อย่างน้อยเว็บไซต์จะใช้งานได้กับอุปกรณ์ iPad mini ที่ทำสิ่งนี้

คุณสามารถไปกับสิ่งนี้:

"เพื่อให้คุณได้รับประสบการณ์การท่องเว็บที่ดีที่สุดเราพยายามตรวจจับประเภทอุปกรณ์ของคุณเพื่อปรับแต่งเว็บไซต์ให้เข้ากับอุปกรณ์ของคุณขออภัยเนื่องจากข้อ จำกัด นี้ไม่สามารถทำได้ตลอดเวลาและเราไม่สามารถระบุได้ว่าคุณใช้ iPad 2 หรือ iPad mini โดยใช้วิธีการเหล่านี้

เพื่อประสบการณ์การท่องเว็บที่ดีที่สุดโปรดเลือกอุปกรณ์ที่คุณใช้ด้านล่าง

ตัวเลือกนี้จะถูกเก็บไว้สำหรับการเข้าชมเว็บไซต์ในอุปกรณ์นี้ในอนาคต

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

"

ฉันไม่คุ้นเคยกับสิ่งที่คุณทำได้และไม่สามารถทำฝั่งไคลเอ็นต์ใน Javascript ได้ ฉันรู้ว่าคุณสามารถรับ IP ของผู้ใช้ แต่เป็นไปได้ที่จะได้รับที่อยู่ mac ของผู้ใช้? ช่วงเหล่านั้นแตกต่างกันระหว่าง iPad2 และ iPad mini หรือไม่?

ฉันรู้ว่านั่นเป็นวิธีที่น่ากลัว แต่ในขณะนี้วิธีเดียวที่จะแยกความแตกต่างระหว่าง iPad Mini และ iPad 2 คือการตรวจสอบหมายเลขบิลด์ของมันและแมปหมายเลขบิลด์ด้วยอุปกรณ์ที่เกี่ยวข้อง

ให้ฉันยกตัวอย่าง: iPad mini, เวอร์ชัน 6.0, กำลังเปิดเผย " 10A406" เป็นหมายเลขบิลด์ขณะที่ iPad 2 กำลังเปิดเผย " 10A5376e"

ค่านี้สามารถรับได้อย่างง่ายดายผ่าน regex ในตัวแทนผู้ใช้ ( window.navigator.userAgent); หมายเลขนั้นจะนำหน้าด้วย " Mobile/"

น่าเสียดายที่นี่เป็นวิธีเดียวที่ชัดเจนในการตรวจสอบ iPad Mini ฉันขอแนะนำให้นำviewportวิธีการที่เกี่ยวข้อง (หากได้รับการสนับสนุนโดยใช้หน่วย vh / vw) เพื่อแสดงเนื้อหาในขนาดหน้าจอที่แตกต่างกันอย่างเหมาะสม

tl; dr อย่าชดเชยความแตกต่างระหว่าง iPad mini และ iPad 2 เว้นแต่ว่าคุณจะชดเชยความอ้วนและนิ้วผอมด้วย

แอปเปิ้ลดูเหมือนจะจงใจพยายามที่จะไม่ให้คุณบอกความแตกต่าง Apple ดูเหมือนจะไม่ต้องการให้เราเขียนรหัสที่แตกต่างกันสำหรับไอแพดรุ่นต่าง ๆ ไม่ได้เป็นส่วนหนึ่งของ Apple ตัวเองฉันไม่รู้เรื่องนี้อย่างแน่นอนฉันแค่บอกว่านี่คือสิ่งที่ดูเหมือน บางทีถ้าชุมชนนักพัฒนาซอฟต์แวร์มาพร้อมกับตัวตรวจจับแฟนซีสำหรับ iPad minis, Apple อาจจงใจทำลายตัวตรวจจับนั้นใน iOS เวอร์ชันอนาคต Apple ต้องการให้คุณกำหนดขนาดเป้าหมายขั้นต่ำเป็น 44 คะแนน iOS และ iOS จะแสดงว่ามีสองขนาดคือขนาด iPad ที่ใหญ่กว่าและขนาดเล็กกว่า iPhone / iPad ขนาดเล็ก 44 คะแนนมีน้ำใจมากมายและผู้ใช้ของคุณจะรู้ว่าพวกเขาอยู่บน iPad ที่เล็กกว่าหรือไม่ดังนั้นสามารถชดเชยด้วยตัวเองได้

ฉันขอแนะนำให้ย้อนกลับไปยังเหตุผลที่คุณระบุไว้เพื่อขอเครื่องตรวจจับ: ปรับขนาดเป้าหมายเพื่อความสะดวกสบายของผู้ใช้ ด้วยการตัดสินใจออกแบบสำหรับขนาดเดียวบน iPad ขนาดใหญ่และอีกขนาดหนึ่งบน iPad ขนาดเล็กคุณกำลังตัดสินใจว่าทุกคนมีนิ้วขนาดเท่ากัน หากการออกแบบของคุณแน่นพอที่ความแตกต่างของขนาดจาก iPad 2 และ iPad mini สร้างความแตกต่างขนาดของนิ้วระหว่างฉันกับภรรยาของฉันจะสร้างความแตกต่างที่ใหญ่กว่า ดังนั้นชดเชยขนาดนิ้วผู้ใช้ไม่ใช่รุ่น iPad

ฉันมีข้อเสนอแนะเกี่ยวกับวิธีการวัดขนาดนิ้ว ฉันเป็นนักพัฒนา iOS ดั้งเดิมดังนั้นฉันไม่รู้ว่าสามารถใช้ HTML5 ได้หรือไม่ แต่นี่คือวิธีที่ฉันจะวัดขนาดนิ้วในแอปเนทีฟ ฉันจะให้ผู้ใช้บีบสองวัตถุเข้าด้วยกันแล้ววัดว่าใกล้กันมากแค่ไหน นิ้วที่เล็กลงจะทำให้วัตถุเข้าใกล้กันมากขึ้นและคุณสามารถใช้การวัดนี้เพื่อรับปัจจัยการปรับขนาด สิ่งนี้จะปรับขนาด iPad โดยอัตโนมัติ บุคคลคนเดียวกันจะมีการวัดจุดบนหน้าจอของ iPad mini มากกว่าบน iPad 2 สำหรับเกมคุณสามารถเรียกขั้นตอนการปรับเทียบนี้หรือแม้แต่เรียกมันออกมา มีมันเป็นขั้นตอนเริ่มต้น ยกตัวอย่างเช่นในเกมยิงปืนให้ผู้เล่นใส่กระสุนเข้าไปในปืนด้วยท่าทางจับ

ขอให้ผู้ใช้วาง iPad ของพวกเขาจากหลายพันฟุตเหนือพื้นดิน จากนั้นใช้ accelerometer ภายในเพื่อวัดเวลาที่ iPad ใช้ในการเข้าถึงความเร็วเทอร์มินัล iPad ขนาดใหญ่มีค่าสัมประสิทธิ์การลากสูงกว่าและควรถึงความเร็วเทอร์มินัลในเวลาน้อยกว่าiPad Miniมินิ

นี่คือตัวอย่างโค้ดที่จะช่วยคุณเริ่มต้นใช้งาน

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

คุณเกือบจะต้องทบทวนรหัสนี้อีกครั้งเมื่อ Apple เปิดตัว iPad รุ่นต่อไปในรูปแบบที่แตกต่างออกไปอย่างหลีกเลี่ยงไม่ได้ แต่ฉันมั่นใจว่าคุณจะยังคงอยู่เหนือสิ่งอื่นและดูแลแฮ็คนี้สำหรับ iPad รุ่นใหม่แต่ละรุ่น

น่าเสียดายที่ตอนนี้ดูเหมือนว่าเป็นไปไม่ได้: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

สองวันที่ผ่านมาฉันได้ทวีตเกี่ยวกับปัญหาที่ตรวจพบครั้งแรก:“ ได้รับการยืนยันว่าตัวแทนผู้ใช้ iPad Mini เหมือนกับ iPad 2 ” ฉันได้รับคำตอบมานับร้อยที่บอกว่าการดมกลิ่นเอเจนต์ของผู้ใช้เป็นวิธีปฏิบัติที่ไม่ดีเราควรตรวจจับคุณสมบัติที่ไม่ใช่อุปกรณ์ ฯลฯ

ใช่พวกคุณถูกต้อง แต่มันไม่มีความสัมพันธ์โดยตรงกับปัญหา และฉันต้องการที่จะเพิ่มข่าวร้ายสอง: ไม่มีเทคนิคฝั่งไคลเอ็นต์ที่จะทำให้“ตรวจสอบคุณสมบัติ” ค่า

นี่คือช็อตเด็ด แต่หนึ่งในความแตกต่างระหว่าง iPad 2 และ iPad mini ก็คือเมื่อก่อนไม่มีไจโรสโคปแบบ 3 แกน อาจเป็นไปได้ที่จะใช้ API การวางแนวอุปกรณ์ WebKit เพื่อดูว่าคุณสามารถรับข้อมูลประเภทใดได้บ้าง

ตัวอย่างเช่นหน้านี้ดูเหมือนจะแนะนำว่าคุณจะได้รับเท่านั้นrotationRateค่าเมื่ออุปกรณ์มีการวัดการหมุนวน

ขออภัยฉันไม่สามารถให้ POC ที่ใช้งานได้ - ฉันไม่สามารถเข้าถึงมินิ iPad บางทีบางคนที่รู้เพิ่มเติมเกี่ยวกับ API การปฐมนิเทศเหล่านี้สามารถพูดคุยได้ที่นี่

ทั้ง iPad 2 และ iPad Mini มีแบตเตอรี่ขนาดต่างกัน

ถ้า iOS 6 สนับสนุนคุณสามารถได้รับระดับแบตเตอรี่ในปัจจุบันจากการใช้0.0..1.0 window.navigator.webkitBattery.levelในระดับหนึ่งทั้งในฮาร์ดแวร์หรือซอฟต์แวร์ที่มีแนวโน้มว่าจะถูกคำนวณCurrentLevel / TotalLevelโดยที่ทั้งคู่เป็น ints 1 / TotalLevelถ้าเป็นเช่นนั้นจะส่งผลให้ลอยซึ่งเป็นหลายของ หากคุณใช้จำนวนมากของการอ่านระดับแบตเตอรี่จากอุปกรณ์ทั้งสองและคำนวณbattery.level * nคุณอาจจะสามารถที่จะหาค่า n ที่ผลลัพธ์ทั้งหมดเริ่มจะใกล้เคียงกับจำนวนเต็มซึ่งจะทำให้คุณและiPad2TotalLeveliPadMiniTotalLevel

หากทั้งสองตัวเลขที่แตกต่างกันและที่สำคัญร่วมกันแล้วในการผลิตคุณสามารถคำนวณและbattery.level * iPad2TotalLevel battery.level * iPadMiniTotalLevelแล้วแต่จำนวนใดจะใกล้เคียงกับจำนวนเต็มจะระบุว่าอุปกรณ์ใดกำลังใช้งานอยู่

ขออภัยเกี่ยวกับจำนวน ifs ในคำตอบนี้! หวังว่าสิ่งที่ดีกว่าจะตามมา

แก้ไข 1: คำตอบเดิมของฉันด้านล่างคือ "อย่าทำ" ในความสนใจของการเป็นบวก:

ฉันคิดว่าคำถามจริงไม่มีส่วนเกี่ยวข้องกับ iPad X กับ iPad mini ฉันคิดว่ามันเกี่ยวกับการปรับขนาดและการจัดวางองค์ประกอบ UI ให้เหมาะกับการยศาสตร์ของผู้ใช้ คุณจำเป็นต้องกำหนดขนาดนิ้ว / วินาทีของผู้ใช้เพื่อผลักดันการปรับขนาดองค์ประกอบ UI และบางทีการวางตำแหน่ง นี่เป็นอีกครั้งและควรจะมาถึงโดยไม่จำเป็นต้องรู้ว่าอุปกรณ์ใดที่คุณใช้งานอยู่ ลองเกินจริง: แอปของคุณกำลังทำงานบนหน้าจอแนวทแยงขนาด 40 นิ้ว ไม่ทราบยี่ห้อและรุ่นหรือ DPI คุณปรับขนาดการควบคุมอย่างไร

คุณต้องแสดงปุ่มที่เป็นองค์ประกอบของการ gating ในเว็บไซต์ / เกม ฉันจะปล่อยให้คุณตัดสินใจว่าจะทำอย่างไร

ในขณะที่ผู้ใช้จะเห็นสิ่งนี้เป็นปุ่มเดียว แต่ในความเป็นจริงมันจะประกอบด้วยเมทริกซ์ของปุ่มเล็ก ๆ ที่อัดแน่นซึ่งถูกปกคลุมด้วยสายตาให้ปรากฏเป็นภาพปุ่มเดียว ลองจินตนาการถึงปุ่ม 100 x 100 พิกเซลที่สร้างขึ้นจาก 400 ปุ่มแต่ละพิกเซล 5 x 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;
} 

และอาร์เรย์ผลลัพธ์:

เมื่อผู้ใช้สัมผัสปุ่มอาร์เรย์คุณจะได้รับรูปภาพของพื้นที่ติดต่อของนิ้วมือของผู้ใช้ จากนั้นคุณสามารถใช้เกณฑ์ใดก็ได้ที่คุณต้องการ (อาจได้รับจากการสังเกตุ) เพื่อให้ได้ตัวเลขที่คุณสามารถใช้ในการปรับขนาดและวางตำแหน่งองค์ประกอบ UI ต่างๆตามความต้องการของคุณ

ความสวยงามของวิธีการนี้คือคุณไม่สนใจอีกต่อไปเกี่ยวกับชื่ออุปกรณ์หรือรุ่นที่คุณใช้ สิ่งที่คุณใส่ใจคือขนาดของนิ้วของผู้ใช้ที่สัมพันธ์กับอุปกรณ์

ฉันคิดว่าปุ่ม sense_array นี้อาจถูกซ่อนไว้เป็นส่วนหนึ่งของกระบวนการเข้าสู่แอปพลิเคชัน ตัวอย่างเช่นหากเป็นเกมอาจมีปุ่ม "เล่น" หรือปุ่มต่างๆพร้อมชื่อผู้ใช้หรือวิธีการเลือกระดับที่จะเล่นเป็นต้นคุณจะได้รับแนวคิด ปุ่ม sense_array สามารถอยู่ที่ใดก็ได้ที่ผู้ใช้ต้องแตะเพื่อเข้าสู่เกม

แก้ไข 2: เพียงแค่สังเกตว่าคุณอาจไม่จำเป็นต้องใช้ปุ่มรับรู้มากมาย ชุดของวงกลมหรือปุ่มศูนย์กลางที่จัดเรียงเช่นดอกจันขนาดใหญ่*อาจทำได้ดี คุณต้องทำการทดสอบ

ด้วยคำตอบเก่าของฉันด้านล่างฉันจะให้เหรียญทั้งสองด้านแก่คุณ

คำตอบเดิม:

คำตอบที่ถูกคืออย่าทำอย่างนี้ มันเป็นความคิดที่ไม่ดี

หากปุ่มของคุณมีขนาดเล็กจนไม่สามารถใช้งานได้กับมินิคุณต้องทำให้ปุ่มของคุณใหญ่ขึ้น

หากฉันได้เรียนรู้อะไรเลยในการทำแอพ iOS ที่เป็นแบบดั้งเดิมนั่นก็คือการพยายามที่จะเอาชนะความฉลาดหลักแหลมของ Apple เป็นสูตรสำหรับความเจ็บปวดและความเจ็บปวดที่ไม่เหมาะสม หากพวกเขาเลือกที่จะไม่อนุญาตให้คุณระบุอุปกรณ์ที่เป็นเพราะในกล่องทรายของพวกเขาคุณไม่ควรทำ

ฉันสงสัยว่าคุณกำลังปรับขนาด / ตำแหน่งในแนวตั้งกับแนวนอนหรือไม่?

เกณฑ์มาตรฐานขนาดเล็กคำนวณสิ่งที่ใช้เวลาประมาณ 2 ไมโครวินาทีบน iPad 2 และ Y วินาทีบน iPad mini

อาจไม่แม่นยำพอ แต่อาจมีคำสั่งบางอย่างว่าชิปของ mini iPad มีประสิทธิภาพมากกว่าที่

ใช่มันเป็นจุดที่ดีในการตรวจสอบไจโรสโคป คุณสามารถทำมันได้อย่างง่ายดายด้วย

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

ไม่มี iPads ใด ๆ เพื่อทำการทดสอบ

ต้องการผู้ใช้ทั้งหมดกับตัวแทนผู้ใช้ iPad2 ในการจัดหาภาพถ่ายโดยใช้กล้องในตัวและตรวจสอบความละเอียดโดยใช้HTML File APIAPI รูปภาพขนาดเล็กของ iPad จะมีความละเอียดสูงขึ้นเนื่องจากการปรับปรุงในกล้อง

คุณสามารถเล่นด้วยการสร้างองค์ประกอบ Canvas ที่มองไม่เห็นและแปลงเป็น PNG / JPG โดยใช้ Canvas API ฉันไม่มีวิธีทดสอบ แต่บิตผลลัพธ์อาจแตกต่างกันเนื่องจากอัลกอริทึมการบีบอัดข้อมูลพื้นฐานและความหนาแน่นพิกเซลของอุปกรณ์

คุณสามารถถามผู้ใช้ได้ตลอด!

หากผู้ใช้ไม่เห็นปุ่มหรือเนื้อหาให้เปิดวิธีจัดการการปรับขนาดด้วยตนเอง คุณสามารถสร้างปุ่มปรับขนาดบนไซต์เพื่อทำให้เนื้อหา (ข้อความ / ปุ่ม) ใหญ่ขึ้น / เล็กลง นี่จะเป็น (เกือบ) รับประกันว่าจะทำงานได้กับความละเอียดของ iPad ใด ๆ ในปัจจุบันและอาจเป็นแอปเปิ้ลความละเอียดในอนาคตตัดสินใจว่าพวกเขาต้องการ

นี่ไม่ใช่คำตอบสำหรับคำถามของคุณตามที่โพสต์ แต่ฉันหวังว่ามันจะมีประโยชน์มากกว่าการพูดว่า "อย่าทำอย่างนั้น":

แทนที่จะตรวจจับ iPad Mini ทำไมไม่ตรวจสอบว่าผู้ใช้มีปัญหาในการกดปุ่มควบคุม (หรือ: กดปุ่มในส่วนย่อยของการควบคุมอย่างต่อเนื่อง) และขยาย / ย่อขนาดของตัวควบคุมเพื่อรองรับพวกมัน

ผู้ใช้ที่ต้องการการควบคุมที่ใหญ่กว่าจะได้รับโดยไม่คำนึงถึงฮาร์ดแวร์ ผู้ใช้ที่ไม่ต้องการการควบคุมที่ใหญ่กว่าและต้องการดูเนื้อหาเพิ่มเติมก็ทำได้เช่นกัน มันไม่ง่ายเลยที่จะตรวจจับฮาร์ดแวร์และจะมีบางอย่างที่จะทำให้ถูกต้อง แต่ถ้าทำอย่างระมัดระวังมันอาจจะดีจริงๆ

สิ่งนี้ทำให้ฉันนึกถึงคำพูดจากหนังเรื่อง Equilibrium:

"คุณจะพูดว่าอะไรเป็นวิธีที่ง่ายที่สุดในการเอาอาวุธออกไปจาก Grammaton Cleric"

"คุณถามเขาเพื่อมัน"

เราเคยชินกับการต่อสู้เพื่อหาทางแก้ปัญหาบางครั้งมันอาจจะดีกว่าที่จะถาม (มีเหตุผลที่ดีที่เรามักจะไม่ทำเช่นนี้ แต่มันก็เป็นตัวเลือกเสมอ) คำแนะนำทั้งหมดที่นี่ยอดเยี่ยม แต่วิธีแก้ปัญหาง่าย ๆ ก็คือให้โปรแกรมของคุณถาม iPad ที่พวกเขาใช้เมื่อพวกเขาเริ่ม .

ฉันรู้ว่านี่เป็นคำตอบแบบทะลึ่ง แต่ฉันหวังว่ามันจะเป็นเครื่องเตือนใจว่าเราไม่ต้องต่อสู้เพื่อทุกสิ่ง (ฉันค้ำยันตัวเองสำหรับ downvotes: P)

ตัวอย่างบางส่วน:

• การตรวจจับคีย์บอร์ดระหว่างการติดตั้งระบบปฏิบัติการบางครั้งไม่สามารถตรวจจับคีย์บอร์ดเฉพาะดังนั้นตัวติดตั้งจึงต้องถาม
• Windows จะถามว่าเครือข่ายที่คุณเชื่อมต่อเป็นเครือข่ายในบ้านหรือเครือข่ายสาธารณะ
• คอมพิวเตอร์ไม่สามารถตรวจจับบุคคลที่กำลังจะใช้งานได้ดังนั้นจึงต้องมีชื่อผู้ใช้และรหัสผ่าน

ขอให้โชคดี - ฉันหวังว่าคุณจะพบทางออกที่ยอดเยี่ยม! ถ้าคุณทำไม่ได้อย่าลืมอันนี้

ไม่ตอบคำถาม แต่เป็นคำถามที่อยู่เบื้องหลังคำถาม:

เป้าหมายของคุณคือการปรับปรุงประสบการณ์ผู้ใช้บนหน้าจอที่เล็กลง รูปลักษณ์ของส่วนควบคุม UI นั้นเป็นส่วนหนึ่งของมัน อีกส่วนหนึ่งของ UX คือวิธีที่แอปพลิเคชันตอบสนอง

จะเกิดอะไรขึ้นถ้าคุณทำให้พื้นที่ที่ตอบสนองต่อการแตะนั้นใหญ่พอที่จะเป็นมิตรกับผู้ใช้บน iPad Mini ในขณะที่รักษาการแสดงภาพของ UI ควบคุมขนาดเล็กพอที่จะทำให้มองเห็นได้บน iPad

หากคุณรวบรวมก๊อกน้ำเพียงพอที่ไม่ได้อยู่ในพื้นที่มองเห็นคุณสามารถตัดสินใจปรับขนาดการควบคุม UI ได้ด้วยการมองเห็น

เป็นโบนัสสำหรับมือใหญ่บน iPad เช่นกัน

โซลูชันทั้งหมดที่นี่ไม่สามารถพิสูจน์ได้ในอนาคต (สิ่งที่ป้องกันไม่ให้ 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 () จะคืนค่าเป็นพิกเซลเสมอดังนั้นคุณสามารถ:

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

screenSize ตอนนี้มีขนาดที่แอพพลิเคชั่นสามารถใช้ได้นิ้ว (ระวังข้อผิดพลาดในการปัดเศษ) คุณสามารถใช้สิ่งนั้นเพื่อวาง GUI ของคุณในแบบที่คุณชอบ นอกจากนี้อย่าลืมลบ div ที่ไร้ประโยชน์หลังจากนั้น

นอกจากนี้โปรดทราบว่าอัลกอริทึมที่เสนอโดย Kaspars ไม่เพียง แต่จะไม่ทำงานหากผู้ใช้เรียกใช้แอปพลิเคชันแบบเต็มหน้าจอ แต่มันจะแตกถ้า Apple ทำการแก้ไข UI ของเบราว์เซอร์

สิ่งนี้จะไม่แยกความแตกต่างของอุปกรณ์ แต่อย่างที่คุณอธิบายในการแก้ไขสิ่งที่คุณอยากรู้คือขนาดหน้าจอของอุปกรณ์ ความคิดของฉันจะไม่บอกขนาดหน้าจอที่แน่นอน แต่จะให้ข้อมูลที่เป็นประโยชน์มากยิ่งขึ้นขนาดจริง (เป็นนิ้ว) ที่คุณมีเพื่อวาด GUI ของคุณ

แก้ไข: ใช้รหัสนี้เพื่อตรวจสอบว่ามันใช้งานได้จริงบนอุปกรณ์ของคุณ ฉันไม่ได้เป็นเจ้าของ iPads ใด ๆ เพื่อทำการทดสอบ

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 '' ทุกคนสามารถทดสอบสิ่งนี้บนไอแพดและโพสต์ความคิดเห็นได้ไหม อย่าลืมเรียกใช้แบบเต็มหน้าจอ

แก้ไข 2:ปรากฎว่าหน้าที่ฉันทดสอบมีCSS ที่ขัดแย้งกันอยู่บ้างอยู่บ้าง ฉันแก้ไขรหัสทดสอบให้ทำงานอย่างถูกต้องแล้ว คุณต้องการตำแหน่ง: สัมบูรณ์ใน divs เพื่อให้คุณสามารถใช้ความสูงเป็น%

แก้ไข 3:ฉันได้ทำการวิจัยบางอย่างและดูเหมือนว่าไม่มีทางที่จะรับขนาดของหน้าจอในอุปกรณ์ใด ๆ ไม่ใช่สิ่งที่ระบบปฏิบัติการรู้ได้ เมื่อคุณใช้หน่วยโลกแห่งความจริงใน CSS มันเป็นเพียงการประมาณค่าตามคุณสมบัติบางอย่างของหน้าจอของคุณ จำเป็นต้องพูดว่านี่ไม่ถูกต้องเลย

ไม่ได้ทดสอบ แต่แทนที่จะเล่นไฟล์เสียงและตรวจสอบยอดเงินมันสามารถใช้งานฟังไมโครโฟนคลายเสียงรบกวนพื้นหลังและคำนวณ "สี" (กราฟความถี่) หาก IPad Mini มีรูปแบบไมโครโฟนที่แตกต่างจาก IPad 2 สีพื้นหลังของพวกเขาควรจะแตกต่างกันอย่างมากและเทคนิคการพิมพ์ลายนิ้วมือด้วยเสียงบางอย่างอาจช่วยให้คุณทราบว่ามีการใช้อุปกรณ์ใด

ฉันไม่คิดว่ามันจะเป็นไปได้และคุ้มค่ากับความยุ่งยากในกรณีนี้ แต่ฉันคิดว่าลายนิ้วมือสามารถใช้เสียงพื้นหลังในแอพบางตัวได้เช่นเพื่อบอกคุณว่าคุณอยู่ที่ไหนเมื่อคุณอยู่ในอาคาร

ตามคำถามเกี่ยวกับดักลาสnew webkitAudioContext().destination.numberOfChannelsกับ iPad 2 ฉันตัดสินใจทำการทดสอบ

ตรวจสอบ numberOfChannels ที่ส่งคืน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 คืนค่า false

(การทดสอบนี้ไม่ทำงานบนเดสก์ท็อปสำหรับเดสก์ท็อปตรวจสอบว่า webkitAudioContext เป็นฟังก์ชัน)

นี่คือรหัสสำหรับคุณที่จะลองใช้: http://jsfiddle.net/sqFbc/

จะเกิดอะไรขึ้นถ้าคุณสร้างกองกว้าง 1 "x1" และผนวกพวกเขาทีละคนกับผู้ปกครองจนกว่ากล่องกระโดดเพิ่มขึ้นจาก 1 นิ้วถึง 2 นิ้ว? นิ้วของมินิมีขนาดเท่ากับนิ้วบน iPad ใช่ไหม?

ใน iOS7 มีการตั้งค่าผู้ใช้ทั่วทั้งระบบสามารถปรับแต่ง: เมื่อสิ่งต่าง ๆ เล็กเกินไปที่จะอ่านขนาดตัวอักษรการตั้งค่าสามารถเปลี่ยนแปลงได้

ขนาดข้อความนั้นสามารถใช้ในการสร้าง UI ของขนาดที่เป็นไปได้เช่นสำหรับปุ่ม (ทดสอบบน iPad Mini Retina เพื่อตอบสนองต่อการเปลี่ยนแปลงการตั้งค่าขนาดข้อความ):

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

( CSS ปุ่มตัวอย่างขอบคุณ jsfiddle และ cssbuttongenerator)

ฉันกำลังตรวจหามินิ iPad โดยการสร้าง Canvas ที่ใหญ่กว่าที่ iPad mini สามารถแสดงผลได้ได้เติมพิกเซลแล้วอ่านสีกลับคืนมา มินิ iPad อ่านสีเป็น '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);

ฉันต้องการสิ่งนี้สำหรับการปรับขนาดผ้าใบเพื่อให้สามารถตรวจจับคุณสมบัติในกรณีการใช้งานของฉัน