Phát hiện iPad Mini trong HTML5

IPad Mini của Apple là một bản sao nhỏ hơn của iPad 2 theo nhiều cách hơn chúng ta muốn. Trong JavaScript, window.navigatorđối tượng hiển thị các giá trị tương tự cho Mini và iPad 2. Các thử nghiệm của tôi cho đến nay để phát hiện sự khác biệt không dẫn đến thành công.

Sao nó lại quan trọng?

Vì màn hình iPad Mini và iPad 2 giống hệt nhau về pixel nhưng khác nhau về kích thước thực tế (inch / cm), chúng khác nhau về PPI (pixel trên mỗi inch).

Để các ứng dụng web và trò chơi cung cấp giao diện người dùng thân thiện, một số yếu tố được điều chỉnh kích thước tương ứng với vị trí ngón tay cái hoặc ngón tay của người dùng, do đó, chúng tôi có thể muốn chia tỷ lệ hình ảnh hoặc nút nhất định để cung cấp trải nghiệm người dùng tốt hơn.

Những điều tôi đã thử cho đến nay (bao gồm một số cách tiếp cận khá rõ ràng):

• window.devicepixelratio
• Chiều rộng phần tử CSS tính bằng đơn vị cm
• Các truy vấn phương tiện CSS (như resolutionvà -webkit-device-pixel-ratio)
• Bản vẽ SVG trong các đơn vị tương tự
• Thực hiện tất cả các loại biến đổi webkit CSS trong một thời gian đã đặt và đếm các khung được hiển thị với requestAnimFrame(tôi hy vọng sẽ phát hiện ra sự khác biệt có thể đo lường được)

Tôi mới ra ý tưởng. Còn bạn thì sao?

Cập nhật Cảm ơn các phản hồi cho đến nay. Tôi muốn bình luận về việc mọi người bỏ phiếu chống phát hiện iPad mini so với 2 vì Apple có uhm, một nguyên tắc để thống trị tất cả. Được rồi, đây là lý do của tôi tại sao tôi cảm thấy nó thực sự có ý nghĩa trên thế giới để biết một người đang sử dụng iPad mini hay 2. Và làm với lý do của tôi những gì bạn thích.

IPad mini không chỉ là một thiết bị nhỏ hơn nhiều (9,7 inch so với 7,9 inch), mà yếu tố hình thức của nó cho phép sử dụng khác nhau. IPad 2 thường được giữ bằng hai tay khi chơi game trừ khi bạn là Chuck Norris . Mini nhỏ hơn, nhưng nó cũng nhẹ hơn nhiều và cho phép chơi trò chơi trong đó bạn cầm nó bằng một tay và sử dụng tay khác để vuốt hoặc chạm hoặc không chú ý. Là một nhà thiết kế và phát triển trò chơi, tôi chỉ muốn biết đó có phải là một mini không nên tôi có thể chọn cung cấp cho người chơi một điều khiển khác nếu tôi muốn (ví dụ sau khi thử nghiệm A / B với một nhóm người chơi).

Tại sao? Chà, thực tế đã chứng minh rằng phần lớn người dùng có xu hướng sử dụng các cài đặt mặc định, vì vậy hãy bỏ ngón tay cái ảo và đặt một số điều khiển dựa trên cảm ứng khác trên màn hình (chỉ đưa ra một ví dụ tùy ý ở đây) khi người chơi tải lên Trò chơi lần đầu tiên là những gì tôi, và có lẽ các nhà thiết kế trò chơi khác, rất thích có thể làm.

Vì vậy, IMHO điều này vượt xa các cuộc thảo luận về hướng dẫn / ngón tay dày và chỉ là điều Apple và tất cả các nhà cung cấp khác nên làm: cho phép chúng tôi xác định duy nhất thiết bị của bạn và nghĩ khác thay vì theo hướng dẫn.

Phát tệp âm thanh nổi và so sánh phản hồi gia tốc khi âm lượng cao ở kênh bên phải và trên kênh bên trái - iPad2 có loa đơn trong khi iPad Mini có loa âm thanh nổi tích hợp.

Cần sự giúp đỡ của bạn để thu thập dữ liệu, vui lòng truy cập trang này và giúp tôi thu thập dữ liệu cho ý tưởng điên rồ này. Tôi không có iPad mini nên tôi thực sự cần sự giúp đỡ của bạn

Cập nhật: Có vẻ như các giá trị này đang báo cáo chiều rộng và chiều cao của khung nhìn tại thời điểm tạo tab và chúng không thay đổi khi xoay, vì vậy phương pháp này không thể được sử dụng để phát hiện thiết bị !

Bạn có thể sử dụng một trong hai screen.availWidthhoặc screen.availHeightvì chúng có vẻ khác nhau đối với iPad Mini và iPad 2.

Ipad nhỏ

screen.availWidth = 768
screen.availHeight = 1004

Ipad 2

screen.availWidth = 748
screen.availHeight = 1024

Nguồn: http://konstruktor.com/blog/web-design/4394-detect-ipad-mini-javascript/

Tôi hiểu rằng đây có thể là một giải pháp công nghệ thấp, nhưng vì chúng tôi dường như chưa thể đưa ra bất kỳ điều gì khác ..

Tôi giả sử bạn đã kiểm tra hầu hết các thiết bị khác, vì vậy tôi thấy các tình huống sau có thể xảy ra.

Bạn có thể kiểm tra TẤT CẢ các thiết bị phổ biến nhất có thể yêu cầu CSS / kích thước đặc biệt và liệu nó có phù hợp với bất kỳ thiết bị nào trong số chúng cho rằng đó là iPad mini hay chỉ đơn giản là hỏi người dùng?

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

Tôi biết rằng có vẻ như là một cách tiếp cận ngu ngốc ngay bây giờ, nhưng nếu hiện tại chúng tôi không có cách nào để quyết định xem thiết bị là iPad mini hay iPad 2 thì ít nhất trang web sẽ có thể sử dụng được với các thiết bị iPad mini làm điều này.

Bạn thậm chí có thể đi với một cái gì đó như thế này:

"Để cung cấp cho bạn trải nghiệm duyệt tốt nhất có thể, chúng tôi cố gắng phát hiện loại thiết bị của bạn để tùy chỉnh trang web cho thiết bị của bạn. Thật không may vì những hạn chế này không phải lúc nào cũng có thể và hiện tại chúng tôi không thể xác định xem bạn sử dụng iPad 2 hay iPad mini bằng cách sử dụng các phương pháp này.

Để có trải nghiệm duyệt tốt nhất có thể, vui lòng chọn thiết bị bạn đang sử dụng bên dưới.

Lựa chọn này sẽ được lưu trữ cho các lần truy cập vào trang web trong tương lai trên thiết bị này.

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

"

Tôi không hoàn toàn quen thuộc với những gì bạn có thể và không thể làm phía máy khách trong Javascript. Tôi biết bạn có thể lấy IP của người dùng, nhưng có thể lấy địa chỉ mac của người dùng không? Những phạm vi đó có khác nhau giữa iPad2 và iPad mini không?

Tôi biết đó là một giải pháp khủng khiếp, nhưng hiện tại cách duy nhất để phân biệt giữa iPad Mini và iPad 2 là kiểm tra số bản dựng của nó và ánh xạ từng số bản dựng với thiết bị liên quan.

Để tôi cho bạn một ví dụ: iPad mini, phiên bản 6.0, đang hiển thị " 10A406" dưới dạng số bản dựng, trong khi iPad 2 đang hiển thị " 10A5376e".

Giá trị này có thể dễ dàng thu được thông qua biểu thức chính trên tác nhân người dùng ( window.navigator.userAgent); số đó có tiền tố là " Mobile/".

Thật không may, đây là cách duy nhất để phát hiện iPad Mini; Tôi sẽ đề nghị áp dụng một viewportphương pháp liên quan (khi được hỗ trợ, sử dụng các đơn vị vh / vw) để hiển thị đúng nội dung trên các kích thước màn hình khác nhau.

tl; dr Đừng bù cho sự khác biệt giữa iPad mini và iPad 2 trừ khi bạn cũng sẽ bù giữa ngón tay mập và gầy.

Apple dường như đang cố tình không để bạn nói lên sự khác biệt. Apple dường như không muốn chúng tôi viết mã khác nhau cho các phiên bản iPad có kích thước khác nhau. Không phải là một phần của Apple, tôi không biết điều này chắc chắn, tôi chỉ nói rằng đây là những gì nó xuất hiện. Có thể, nếu cộng đồng nhà phát triển đưa ra một trình phát hiện lạ mắt cho minis iPad, Apple có thể cố tình phá vỡ trình phát hiện đó trong các phiên bản iOS trong tương lai. Apple muốn bạn đặt kích thước mục tiêu tối thiểu của bạn thành 44 điểm iOS và iOS sẽ hiển thị ở hai kích thước, kích thước iPad lớn hơn và kích thước nhỏ iPhone / iPad nhỏ hơn. 44 điểm là rất hào phóng, và người dùng của bạn chắc chắn sẽ biết nếu họ ở trên iPad nhỏ hơn, do đó có thể tự bù lại.

Tôi đề nghị lùi lại lý do đã nêu của bạn để yêu cầu máy dò: điều chỉnh kích thước mục tiêu cho thoải mái người dùng cuối. Bằng cách quyết định thiết kế cho một kích thước trên iPad lớn và một kích thước khác trên iPad nhỏ, bạn quyết định rằng tất cả mọi người đều có ngón tay có cùng kích thước. Nếu thiết kế của bạn đủ chặt để sự khác biệt về kích thước so với iPad 2 và iPad mini sẽ tạo ra sự khác biệt, thì kích thước ngón tay giữa tôi và vợ tôi sẽ tạo ra sự khác biệt lớn hơn. Vì vậy, bù cho kích thước ngón tay người dùng, không phải mô hình iPad.

Tôi có một gợi ý về cách đo kích thước ngón tay. Tôi là nhà phát triển iOS bản địa, vì vậy tôi không biết liệu điều này có thể được thực hiện trong HTML5 hay không, nhưng đây là cách tôi sẽ đo kích thước ngón tay trong ứng dụng gốc. Tôi muốn người dùng ghim hai vật lại với nhau, sau đó đo khoảng cách chúng gần nhau. Các ngón tay nhỏ hơn sẽ đưa các vật thể lại gần nhau hơn và bạn có thể sử dụng phép đo này để lấy hệ số tỷ lệ. Điều này tự động điều chỉnh kích thước iPad. Cùng một người sẽ có số đo điểm màn hình trên iPad mini lớn hơn trên iPad 2. Đối với trò chơi, bạn có thể gọi đây là bước hiệu chỉnh hoặc thậm chí không gọi nó ra. Có nó như một bước khởi đầu. Ví dụ, trong một trò chơi bắn súng, người chơi sẽ đặt đạn vào súng với một chuyển động chụm lại.

Yêu cầu người dùng thả iPad của họ từ độ cao vài nghìn feet so với mặt đất. Sau đó sử dụng gia tốc kế bên trong để đo thời gian cần thiết để iPad đạt vận tốc đầu cuối. IPad lớn hơn có hệ số kéo lớn hơn và sẽ đạt vận tốc đầu cuối trong thời gian ngắn hơn iPad Mini .

Đây là một số mã mẫu để giúp bạn bắt đầu.

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

Bạn gần như chắc chắn cần phải xem lại mã này khi Apple chắc chắn phát hành iPad tiếp theo trong một yếu tố hình thức khác. Nhưng tôi chắc chắn rằng bạn sẽ luôn đứng đầu mọi thứ và duy trì bản hack này cho mỗi phiên bản mới của iPad.

Thật không may, tại thời điểm này có vẻ như điều này là không thể: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

Hai ngày trước, tôi đã tweet về vấn đề được phát hiện đầu tiên: Có thể xác nhận rằng Tác nhân người dùng iPad Mini giống với iPad 2 . Tôi đã nhận được hàng trăm câu trả lời theo nghĩa đen rằng việc đánh hơi tác nhân người dùng là một thực tiễn tồi, rằng chúng ta nên phát hiện các tính năng không phải là thiết bị, v.v.

Vâng, các bạn, bạn đúng, nhưng nó không có mối quan hệ trực tiếp với vấn đề. Và tôi cần thêm một tin xấu thứ hai: không có kỹ thuật phía máy khách nào để thực hiện tính năng phát hiện ra tính năng .

Đây là một bức ảnh hoang dã, nhưng một trong những điểm khác biệt giữa iPad 2 và iPad mini là trước đây không có con quay hồi chuyển 3 trục. Có thể bạn sẽ có thể sử dụng API định hướng thiết bị WebKit để xem loại thông tin nào bạn có thể nhận được từ nó.

Ví dụ: trang này dường như gợi ý rằng bạn chỉ có thể nhận đượcrotationRate giá trị nếu thiết bị có con quay hồi chuyển.

Xin lỗi tôi không thể cung cấp POC hoạt động - Tôi không có quyền truy cập vào iPad mini. Có lẽ ai đó biết thêm một chút về các API định hướng này có thể kêu vang ở đây.

Vâng, iPad 2 và iPad Mini có pin có kích thước khác nhau.

Nếu iOS 6 hỗ trợ, bạn có thể lấy mức pin hiện tại từ 0.0..1.0việc sử dụng window.navigator.webkitBattery.level. Ở một mức độ nào đó trong phần cứng hoặc phần mềm, có khả năng được tính là CurrentLevel / TotalLevel, trong đó cả hai đều là số nguyên. Nếu vậy, điều đó sẽ dẫn đến một số float là bội số của 1 / TotalLevel. Nếu bạn lấy nhiều số đọc mức pin từ cả hai thiết bị và tính toán, battery.level * nbạn có thể tìm thấy giá trị n trong đó tất cả các kết quả bắt đầu gần với số nguyên, sẽ cung cấp cho bạn iPad2TotalLevelvàiPadMiniTotalLevel .

Nếu hai số đó khác nhau và cùng là số nguyên tố, thì trong sản xuất, bạn có thể tính toán battery.level * iPad2TotalLevelvàbattery.level * iPadMiniTotalLevel . Bất kỳ số nào gần với số nguyên sẽ cho biết thiết bị nào đang được sử dụng.

Xin lỗi về số lượng if trong câu trả lời này! Hy vọng điều gì đó tốt hơn sẽ đến cùng.

EDIT 1: Câu trả lời ban đầu của tôi, bên dưới, là "đừng làm điều đó". Vì lợi ích tích cực:

Câu hỏi thực sự, tôi nghĩ, không liên quan gì đến iPad X so với iPad mini. Tôi nghĩ rằng đó là về việc tối ưu hóa kích thước phần tử UI và vị trí cho công thái học của người dùng. Bạn cần xác định kích thước ngón tay của người dùng để điều khiển kích thước phần tử UI và có lẽ là định vị. Điều này, một lần nữa, có lẽ nên được thực hiện mà không cần thực sự biết bạn đang chạy trên thiết bị nào. Hãy phóng đại: Ứng dụng của bạn đang chạy trên màn hình đường chéo 40 inch. Không biết kiểu dáng và mẫu mã hoặc DPI. Làm thế nào để bạn kích thước các điều khiển?

Bạn cần hiển thị một nút là yếu tố gating vào trang web / trò chơi. Tôi sẽ để bạn quyết định nơi nào hoặc làm thế nào có ý nghĩa để làm điều này.

Mặc dù người dùng sẽ thấy đây là một nút duy nhất, nhưng thực tế, nó sẽ bao gồm một ma trận gồm các nút nhỏ được đóng gói chặt chẽ được bao phủ trực quan để xuất hiện dưới dạng hình ảnh một nút. Hãy tưởng tượng một nút 100 x 100 pixel được tạo thành từ 400 nút, mỗi nút 5 x 5 pixel. Bạn cần thử nghiệm để xem điều gì có ý nghĩa ở đây và việc lấy mẫu của bạn cần nhỏ đến mức nào.

CSS có thể cho mảng nút:

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

Và mảng kết quả:

Khi người dùng chạm vào mảng nút, bạn sẽ có được hình ảnh về vùng tiếp xúc ngón tay của người dùng. Sau đó, bạn có thể sử dụng bất kỳ tiêu chí nào bạn muốn (có thể xuất phát theo kinh nghiệm) để đến một tập hợp số mà bạn có thể sử dụng để chia tỷ lệ và định vị các thành phần UI khác nhau theo yêu cầu của bạn.

Cái hay của phương pháp này là bạn không còn quan tâm đến tên thiết bị hoặc kiểu máy nào bạn có thể giao dịch. Tất cả những gì bạn quan tâm là kích thước ngón tay của người dùng liên quan đến thiết bị.

Tôi sẽ tưởng tượng rằng nút Sense_array này có thể được ẩn như một phần của quá trình nhập vào ứng dụng. Ví dụ: nếu là trò chơi, có thể có nút "Phát" hoặc nhiều nút khác nhau có tên người dùng hoặc phương tiện để chọn cấp độ họ sẽ chơi, v.v. Bạn hiểu ý tưởng. Nút Sense_array có thể sống ở bất cứ nơi nào người dùng phải chạm vào để vào trò chơi.

EDIT 2: Chỉ cần lưu ý rằng bạn có thể không cần nhiều nút cảm giác. Một tập hợp các vòng tròn đồng tâm hoặc các nút được sắp xếp như một dấu sao lớn *có thể làm tốt. Bạn phải thử nghiệm.

Với câu trả lời cũ của tôi, bên dưới, tôi sẽ đưa cho bạn cả hai mặt của đồng tiền.

TRẢ LỜI:

Câu trả lời đúng là: Đừng làm điều này. Đó là một ý tưởng tồi.

Nếu các nút của bạn quá nhỏ đến mức chúng không thể sử dụng được trên mini, bạn cần làm cho các nút của mình lớn hơn.

Nếu tôi đã học được bất cứ điều gì trong việc làm các ứng dụng iOS gốc thì việc cố gắng vượt qua Apple là một công thức cho nỗi đau và sự trầm trọng không đáng có. Nếu họ chọn không cho phép bạn xác định thiết bị thì đó là vì, trong hộp cát của họ, bạn không nên.

Tôi tự hỏi, bạn đang điều chỉnh kích thước / vị trí trong chân dung so với phong cảnh?

Điều gì về một điểm chuẩn vi mô, tính toán một cái gì đó mất khoảng X micro giây trên iPad 2 và Y giây trên iPad mini.

Điều này có thể không đủ chính xác, nhưng có thể có một số hướng dẫn chip của iPad mini hiệu quả hơn.

Vâng, đó là một điểm tốt để kiểm tra con quay hồi chuyển. Bạn có thể dễ dàng làm điều đó với

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

hoặc một cái gì đó như

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

Không có bất kỳ iPad nào để kiểm tra.

Yêu cầu tất cả người dùng với tác nhân người dùng iPad2 cung cấp ảnh bằng camera tích hợp và phát hiện độ phân giải bằng API tệp HTML . Ảnh iPad Mini sẽ có độ phân giải cao hơn do những cải tiến trong camera.

Bạn cũng có thể chơi xung quanh với việc tạo một phần tử canvas vô hình và chuyển đổi nó thành PNG / JPG bằng API Canvas. Tôi không có cách nào để kiểm tra nó, nhưng các bit kết quả có thể khác nhau do thuật toán nén cơ bản và mật độ pixel của thiết bị.

Bạn luôn có thể hỏi người dùng?!

Nếu Người dùng không thể thấy các nút hoặc nội dung, thì hãy cung cấp cho họ cách tự quản lý tỷ lệ. Bạn luôn có thể xây dựng một số nút chia tỷ lệ cho trang web để làm cho nội dung (văn bản / nút) lớn hơn / nhỏ hơn. Điều này sẽ được (gần như) đảm bảo hoạt động cho mọi độ phân giải iPad hiện tại và có lẽ bất kỳ táo nào có độ phân giải trong tương lai quyết định họ muốn thực hiện.

Đây không phải là một câu trả lời cho câu hỏi của bạn như được đặt ra, nhưng tôi hy vọng nó sẽ hữu ích hơn là nói "đừng làm vậy":

Thay vì phát hiện iPad Mini, tại sao bạn không phát hiện ra rằng người dùng đang gặp khó khăn trong việc kiểm soát (hoặc: liên tục đánh vào một tiểu vùng điều khiển) và tăng / thu nhỏ kích thước của điều khiển để chứa chúng?

Người dùng cần điều khiển lớn hơn có được chúng bất kể phần cứng; Người dùng không cần kiểm soát lớn hơn và muốn xem nhiều nội dung hơn cũng nhận được điều đó. Nó không đơn giản như chỉ cần phát hiện phần cứng, và sẽ có một số điều tinh tế để làm đúng, nhưng nếu nó được thực hiện cẩn thận thì nó có thể thực sự tốt.

Điều này làm tôi nhớ đến một trích dẫn từ bộ phim Cân bằng:

"Những gì, bạn sẽ nói, là cách dễ nhất để có được một vũ khí từ Clm Grammaton?"

"Bạn yêu cầu anh ta cho nó."

Chúng ta đã quá quen với việc đấu tranh cho các giải pháp, khi đôi khi, có thể tốt hơn để hỏi. (Có những lý do chính đáng mà chúng ta thường không làm điều này, nhưng đó luôn là một lựa chọn.) Tất cả các đề xuất ở đây đều tuyệt vời, nhưng một giải pháp đơn giản có thể là chương trình của bạn hỏi iPad nào đang sử dụng khi họ khởi động .

Tôi biết rằng đây là một câu trả lời táo tợn, nhưng tôi hy vọng đó là một lời nhắc nhở rằng chúng ta không phải đấu tranh cho tất cả mọi thứ. (Tôi đã chuẩn bị tinh thần cho các downvote .: P)

Vài ví dụ:

• Phát hiện bàn phím trong khi cài đặt HĐH đôi khi không thể phát hiện một bàn phím cụ thể, vì vậy trình cài đặt phải hỏi.
• Windows hỏi xem mạng bạn kết nối là mạng gia đình hay mạng công cộng.
• Máy tính không thể phát hiện người sắp sử dụng nó, vì vậy họ yêu cầu tên người dùng và mật khẩu.

Điều may mắn nhất - Tôi hy vọng bạn tìm thấy một giải pháp tuyệt vời! Nếu bạn không, mặc dù, đừng quên điều này.

Không trả lời câu hỏi, nhưng câu hỏi đằng sau câu hỏi:

Mục tiêu của bạn là cải thiện trải nghiệm người dùng trên màn hình nhỏ hơn. Sự xuất hiện của các điều khiển UI là một phần của nó. Một phần khác của UX là cách ứng dụng phản hồi.

Điều gì sẽ xảy ra nếu bạn làm cho khu vực phản hồi với vòi đủ lớn để thân thiện với người dùng trên iPad Mini trong khi vẫn giữ biểu thị trực quan của các điều khiển UI đủ nhỏ để dễ nhìn trên iPad?

Nếu bạn đã thu thập đủ các vòi không nằm trong khu vực trực quan, bạn có thể quyết định mở rộng trực quan các Điều khiển giao diện người dùng.

Như một phần thưởng, điều này cũng hoạt động cho các tay lớn trên iPad.

Tất cả các giải pháp ở đây không phải là bằng chứng trong tương lai (điều ngăn Apple phát hành một iPad có cùng kích thước màn hình với iPad 2 nhưng có cùng độ phân giải với iPad Mini). Vì vậy, tôi đã đưa ra một ý tưởng:

Tạo một div với chiều rộng 1 inch và gắn nó vào thân máy. Sau đó, tôi tạo một div khác với chiều rộng 100% và gắn nó vào phần thân:

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

Hàm jQuery width () luôn trả về các giá trị bằng pixel để bạn có thể chỉ cần:

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

screenSize hiện giữ kích thước khả dụng cho ứng dụng theo inch (mặc dù vậy, hãy cẩn thận làm tròn số lần xóa). Bạn có thể sử dụng nó để đặt GUI của bạn theo cách bạn muốn. Cũng đừng quên loại bỏ các div vô dụng sau đó.

Cũng lưu ý rằng thuật toán được đề xuất bởi Muffars không chỉ không hoạt động nếu người dùng chạy ứng dụng ở chế độ toàn màn hình mà còn bị hỏng nếu Apple vá giao diện người dùng trình duyệt.

Điều này sẽ không phân biệt các thiết bị, nhưng như bạn đã giải thích trong phần chỉnh sửa của mình, điều bạn thực sự muốn biết là kích thước màn hình của thiết bị. Ý tưởng của tôi cũng sẽ không cho bạn biết chính xác kích thước màn hình, nhưng nó sẽ cung cấp cho bạn thông tin hữu ích hơn nữa, kích thước thực tế (tính bằng inch) mà bạn có sẵn để vẽ GUI của mình.

EDIT: Sử dụng mã này để kiểm tra xem nó có thực sự hoạt động trên thiết bị của bạn không. Tôi không sở hữu bất kỳ iPad nào để thử nghiệm.

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

Nó sẽ hiện ra một cửa sổ với kích thước màn hình của bạn theo inch. Nó dường như hoạt động trên máy tính xách tay của tôi, trả lại 15,49 trong khi màn hình máy tính xách tay của tôi được bán trên thị trường là 15,4 ''. Bất cứ ai cũng có thể kiểm tra điều này trên iPad và gửi bình luận? Đừng quên chạy toàn màn hình.

EDIT2: Hóa ra trang tôi đã kiểm tra nó có một số CSS xung đột . Tôi đã sửa mã kiểm tra để hoạt động đúng. Bạn cần vị trí: tuyệt đối trên các div để bạn có thể sử dụng chiều cao theo%.

EDIT3: Tôi đã thực hiện một số nghiên cứu và dường như không có cách nào để thực sự có được kích thước màn hình trên bất kỳ thiết bị nào. Đó không phải là điều mà HĐH có thể biết. Khi bạn sử dụng một đơn vị thế giới thực trong CSS, nó thực sự chỉ là một ước tính dựa trên một số thuộc tính của màn hình của bạn. Không cần phải nói rằng điều này là không chính xác cả.

Không được kiểm tra, nhưng thay vì phát tệp âm thanh và kiểm tra cân bằng, nó có thể hoạt động để nghe micrô, trích xuất tiếng ồn nền và tính toán "màu" (biểu đồ tần số) của nó. Nếu IPad Mini có kiểu micrô khác với IPad 2, thì màu nền của chúng sẽ khác nhau về mặt đo lường và một số kỹ thuật lấy dấu vân tay âm thanh có thể giúp bạn biết thiết bị nào đang được sử dụng.

Tôi không nghiêm túc nghĩ rằng nó có thể khả thi và đáng để gặp rắc rối trong trường hợp cụ thể này, nhưng tôi nghĩ rằng dấu vân tay có thể được sử dụng trong một số ứng dụng, ví dụ như để cho bạn biết bạn đang ở đâu khi bạn ở trong tòa nhà.

Dựa trên câu hỏi của Douglas về new webkitAudioContext().destination.numberOfChannelsiPad 2, tôi quyết định chạy thử nghiệm.

Kiểm tra numberOfChannels được trả lại 2trên iPad mini nhưng không có gì trên iPad 2 với iOS 5 và 2với iOS 6.

Sau đó, tôi đã cố kiểm tra xem webkitAudioContext có sẵn không

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

Tương tự ở đây iPad Mini và iPad 2 với iOS 6 trả về true trong khi iPad 2 với iOS 5 trả về false.

(Thử nghiệm này không hoạt động trên máy tính để bàn, để kiểm tra máy tính để bàn nếu webkitAudioContext là một chức năng).

Đây là mã để bạn dùng thử: http://jsfiddle.net/sqFbc/

Điều gì sẽ xảy ra nếu bạn tạo ra một loạt các div rộng 1 "x1" và nối chúng lần lượt với div cha cho đến khi hộp giới hạn nhảy từ 1 inch lên 2 inch? Một inch trên mini có cùng kích thước với một inch trên iPad, phải không?

Trong iOS7 có một người dùng cài đặt toàn hệ thống có thể điều chỉnh: khi mọi thứ trở nên quá nhỏ để đọc, cài đặt Kích thước văn bản có thể được thay đổi.

Kích thước văn bản đó có thể được sử dụng để tạo giao diện người dùng có kích thước hợp lý, ví dụ: đối với một nút (được thử nghiệm trên iPad Mini Retina để phản ứng với các thay đổi cài đặt Kích thước văn bản):

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

( CSS nút mẫu , nhờ jsfiddle và cssbuttongenerator)

Tôi đang phát hiện iPad mini bằng cách tạo một khung vẽ lớn hơn iPad mini có thể hiển thị , lấp đầy một pixel sau đó đọc lại màu. IPad mini đọc màu là '000000'. mọi thứ khác sẽ khiến nó trở thành màu tô.

Mã một phần:

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

Tôi cần điều này để định cỡ canvas để phát hiện tính năng trong trường hợp sử dụng của tôi.