HTML5에서 iPad Mini 감지

Apple의 iPad Mini는 우리가 원하는 것보다 더 많은 방법으로 iPad 2의 작은 복제품입니다. JavaScript에서 window.navigator객체는 Mini 및 iPad 2에 대해 동일한 값을 노출합니다. 지금까지의 차이를 감지하기위한 테스트로 성공하지 못했습니다.

이것이 왜 중요한가?

iPad Mini와 iPad 2 화면은 픽셀 단위는 동일하지만 실제 크기 (인치 / 센티미터)는 다르 므로 PPI (인치당 픽셀)가 다릅니다 .

웹 응용 프로그램 및 게임에서 친숙한 사용자 인터페이스를 제공하기 위해 특정 요소의 크기는 사용자의 엄지 손가락 또는 손가락 위치에 따라 조정되므로 특정 이미지 또는 단추를 확장하여보다 나은 사용자 경험을 제공 할 수 있습니다.

내가 지금까지 시도한 것 (몇 가지 명백한 접근법 포함) :

• window.devicepixelratio
• cm 단위의 CSS 요소 너비
• CSS 미디어 쿼리 (예 : resolution및-webkit-device-pixel-ratio )
• 유사한 단위의 SVG 도면
• 설정된 시간 동안 모든 종류의 CSS 웹킷 변환을 수행하고 렌더링 프레임 수를 계산 requestAnimFrame합니다 (측정 가능한 차이를 감지하기를 희망했습니다)

나는 아이디어가 신선하다. 당신 은요?

업데이트 지금까지 답변 주셔서 감사합니다. 나는 애플이 아이엠 미니를 감지하는 것에 반대하는 사람들에 대해 언급하고 싶다. 자, 여기 제가 왜 세상에 사람이 iPad mini 또는 2를 사용하고 있는지를 아는 것이 합리적이라고 생각하는 이유가 있습니다. 그리고 당신이 좋아하는 것을 내 추론과 함께하십시오.

iPad mini는 훨씬 작은 장치 일뿐 아니라 (9.7 인치 대 7.9 인치) 폼 팩터가 다른 용도로 사용될 수 있습니다. 척 노리스 가 아니라면 게임을 할 때 iPad 2는 보통 두 손으로 잡습니다 . 미니는 더 작지만 훨씬 가벼워서 한 손으로 잡고 다른 손으로 스 와이프하거나 탭하거나 기타로 게임 플레이를 할 수 있습니다. 게임 디자이너이자 개발자 인 나는 그것이 미니 인지 알고 싶기 때문에 원하는 경우 플레이어에게 다른 제어 체계를 제공하도록 선택할 수 있습니다 (예 : 플레이어 그룹과의 A / B 테스트 후).

왜? 글쎄, 대부분의 사용자가 기본 설정을 사용하는 경향이 있다는 것이 입증되었으므로 가상 썸 스틱을 남기지 않고 플레이어가 처음으로 게임을하는 것은 아마도 다른 게임 디자이너들 도 할 수있는 일입니다.

따라서 IMHO는 두꺼운 손가락 / 지침 토론을 넘어서고 Apple과 다른 모든 공급 업체가해야 할 일입니다. 우리가 장치를 고유하게 식별하고 지침 을 따르는 대신 다르게 생각할 수있게하십시오 .

오른쪽 채널과 왼쪽 채널에서 볼륨이 높을 때 스테레오 오디오 파일을 재생하고 가속도계 응답을 비교합니다. iPad2에는 모노 스피커가 있고 iPad Mini에는 스테레오 스피커가 내장되어 있습니다.

데이터 수집에 도움이 필요 하면이 페이지 를 방문 하여이 미친 아이디어에 대한 데이터를 수집 하십시오 . iPad mini가 없어서 정말 도움이 필요합니다

업데이트 : 이 값은 탭을 만들 때 뷰포트 너비와 높이를보고하는 것으로 보이며 회전시 변경되지 않으므로이 방법을 장치 감지에 사용할 수 없습니다 !

iPad Mini와 iPad 2에서 다르게 보이는 것처럼 screen.availWidth또는 하나를 사용할 수 있습니다 screen.availHeight.

아이 패드 미니

screen.availWidth = 768
screen.availHeight = 1004

아이 패드 2

screen.availWidth = 748
screen.availHeight = 1024

출처 : http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/

나는 이것이 약간의 저 기술 솔루션 일 수 있음을 이해하지만 아직 다른 것을 생각해 낼 수 없기 때문에 ..

이미 다른 대부분의 장치를 확인했다고 가정하므로 다음 시나리오가 가능합니다.

특별한 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 mini 장치에서 사용할 수 있습니다.

다음과 같이 할 수도 있습니다.

"최고의 브라우징 환경을 제공하기 위해 웹 사이트를 기기에 맞게 사용자 정의하기 위해 기기 유형을 감지하려고합니다. 불행히도 제한 사항으로 인해 항상 가능한 것은 아니며 현재 iPad 2 또는 iPad를 사용할지 여부를 판단 할 수 없습니다 이 방법을 사용하여 미니.

최상의 브라우징 환경을 위해 아래에서 사용중인 장치를 선택하십시오.

이 선택은 나중에이 장치의 웹 사이트 방문을 위해 저장됩니다.

[] 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"를 노출 합니다.

이 값은 사용자 에이전트의 정규 표현식을 통해 쉽게 얻을 수 있습니다 ( window.navigator.userAgent). 해당 번호 앞에 " Mobile/" 가 붙습니다 .

불행히도 이것은 iPad Mini를 감지 할 수있는 유일한 방법입니다. viewport다양한 화면 크기에 내용을 올바르게 표시하기 위해 관련 접근법 (지원되는 경우 vh / vw 단위 사용) 을 채택하는 것이 좋습니다 .

tl; dr 뚱뚱한 손가락과 마른 손가락 사이를 보상하지 않는 한 iPad mini와 iPad 2의 차이를 보상하지 마십시오.

애플은 의도적으로 차이를 말하지 않으려 고 노력하고있는 것으로 보인다. Apple은 크기가 다른 iPad 버전에 대해 다른 코드를 작성하지 않기를 원합니다. 애플의 일원이 아닌, 나는 이것을 확실하게 모른다. 나는 이것이 이것이 어떻게 생겼는지 말하는 것이다. 어쩌면 개발자 커뮤니티가 iPad mini 용 멋진 탐지기를 내 놓으면, Apple은 향후 iOS 버전에서 의도적으로 탐지기를 깨뜨릴 수 있습니다. Apple은 최소 대상 크기를 44 iOS 포인트로 설정하기를 원하며, iOS는이를 iPad 크기와 iPhone / iPad 미니 크기의 두 가지 크기로 표시합니다. 44 포인트는 매우 관대하며, 사용자는 더 작은 iPad에 있는지 확실히 알 수 있으므로 스스로 보상 할 수 있습니다.

감지기를 요청한 이유를 다시 말해 최종 사용자 편의를 위해 대상 크기를 조정하는 것이 좋습니다. 큰 iPad의 한 가지 크기와 작은 iPad의 다른 크기를 디자인하기로 결정하면 모든 사람이 같은 크기의 손가락을 가지게됩니다. 디자인이 타이트하면 iPad 2와 iPad mini의 크기 차이로 인해 차이가 생길 수 있습니다. 나와 아내 사이의 손가락 크기가 더 큰 차이를 만들 것입니다. 따라서 iPad 모델이 아닌 사용자 손가락 크기를 보정하십시오.

손가락 크기를 측정하는 방법에 대한 제안이 있습니다. 나는 네이티브 iOS 개발자이므로 HTML5에서 이것이 달성 될 수 있는지 모르겠지만 네이티브 앱에서 손가락 크기를 측정하는 방법은 다음과 같습니다. 사용자가 두 물체를 모아서 얼마나 가깝게하는지 측정해야합니다. 손가락이 작을수록 물체가 더 가까워지고이 측정을 사용하여 배율을 도출 할 수 있습니다. iPad 크기에 맞게 자동으로 조정됩니다. 같은 사람이 iPad 2보다 iPad mini의 화면 포인트 측정이 더 큽니다. 게임의 경우이 단계를 교정 단계라고 부르거나 호출 할 수도 없습니다. 시작 단계로 사용하십시오. 예를 들어 슈팅 게임에서 플레이어는 총을 탄환으로 탄약을 넣습니다.

사용자에게지면 위 수천 피트에서 iPad를 떨어 뜨리라고 요청하십시오. 그런 다음 내장 가속도계를 사용하여 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 축 자이로 스코프가 없다는 것입니다. WebKit 장치 방향 API를 사용하여 어떤 종류의 정보를 얻을 수 있는지 확인할 수 있습니다.

예 를 들어이 페이지rotationRate 에는 장치에 자이로 스코프가있는 경우 에만 값을 얻을 수 있다고 제안하는 것 같습니다 .

작동중인 POC를 제공 할 수 없어 죄송합니다. iPad mini에 액세스 할 수 없습니다. 아마도 이러한 오리엔테이션 API에 대해 조금 더 알고있는 누군가가 여기에있을 수 있습니다.

iPad 2와 iPad Mini의 배터리 크기는 서로 다릅니다.

iOS 6에서 지원하는 경우을 0.0..1.0사용하여 현재 배터리 잔량을 얻을 수 있습니다 window.navigator.webkitBattery.level. 하드웨어 또는 소프트웨어의 어느 수준에서, 이는 CurrentLevel / TotalLevel모두 int 인 것으로 계산됩니다 . 그렇다면 float의 배수가 1 / TotalLevel됩니다. 당신이 두 장치에서 배터리 잔량 측정을 많이 가지고, 그리고 계산하면 battery.level * n당신은의 값을 찾을 수 없음 모든 결과가 당신을 줄 것이다, 가까운 정수로로 시작하는 경우 수도 iPad2TotalLevel와 iPadMiniTotalLevel.

이 두 숫자가 다르고 서로 소수 인 경우 프로덕션에서 battery.level * iPad2TotalLevel및 을 계산할 수 있습니다 battery.level * iPadMiniTotalLevel. 정수에 가까운 것은 사용중인 장치를 나타냅니다.

이 답변의 if 수에 대해 죄송합니다! 바라건대 더 나은 것이 나올 것입니다.

편집 1 : 아래의 원래 대답은 "하지 마십시오"입니다. 긍정적 인 관심을 갖기 위해 :

실제 질문은 iPad X 대 iPad mini와는 아무런 관련이 없다고 생각합니다. UI 요소 크기와 사용자 인체 공학에 대한 배치를 최적화하는 것입니다. UI 요소 크기 조정 및 위치 조정을 유도하려면 사용자의 손가락 크기를 결정해야합니다. 다시 말하지만 실제로 실행중인 장치를 알 필요없이 도달해야합니다. 과장하자 : 앱이 40 인치 대각선 화면에서 실행 중입니다. 제조업체와 모델 또는 DPI를 모릅니다. 컨트롤 크기를 어떻게 조정합니까?

사이트 / 게임에 게이팅 요소 인 버튼을 표시해야합니다. 이 작업을 수행 할 위치 또는 방법을 결정하기 위해 귀하에게 맡기겠습니다.

사용자는이 버튼을 단일 버튼으로 볼 수 있지만 실제로는 단일 버튼 이미지로 표시되도록 시각적으로 덮여있는 작고 꽉 채워진 버튼 매트릭스로 구성됩니다. 각 5 x 5 픽셀 인 400 개의 버튼으로 구성된 100 x 100 픽셀 버튼을 상상해보십시오. 여기서 의미가 무엇이고 샘플링이 얼마나 작은 지 실험 해보아야합니다.

버튼 배열에 가능한 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 앱을 통해 무엇이든 배운 것이 있다면, 애플을 능가하려는 것은 과도한 고통과 악화의 공식입니다. 그들이 당신이 장치를 식별하도록 허용하지 않으면, 그것은 그들의 샌드 박스에서, 당신은하지 않아야하기 때문입니다.

세로 대 가로의 크기 / 위치를 조정하고 있습니까?

마이크로 벤치 마크는 아이 패드 2에서 약 X 마이크로 초, 아이 패드 미니에서 Y 초가 걸리는 것을 계산합니다.

아마도 정확하지는 않지만 iPad mini의 칩이 더 효율적이라는 지침이있을 수 있습니다.

예, 자이로 스코프를 확인하는 것이 좋습니다. 당신은 쉽게 그것을 할 수 있습니다

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가 없습니다.

iPad2 사용자 에이전트를 사용하는 모든 사용자 는 내장 카메라를 사용하여 사진을 제공 하고 HTML 파일 API를 사용하여 해상도를 감지해야 합니다 . 카메라 개선으로 인해 iPad Mini 사진의 해상도가 높아집니다.

보이지 않는 캔버스 요소를 만들어 캔버스 API를 사용하여 PNG / JPG로 변환 할 수도 있습니다. 테스트 할 방법이 없지만 기본 압축 알고리즘과 장치의 픽셀 밀도로 인해 결과 비트 가 다를 수 있습니다.

항상 사용자에게 물어볼 수 있습니까?!

사용자가 버튼이나 컨텐츠를 볼 수 없으면 스케일링 자체를 관리 할 수있는 방법을 제공하십시오. 콘텐츠 (텍스트 / 버튼)를 더 크거나 작게 만들기 위해 사이트에 일부 확장 버튼을 항상 만들 수 있습니다. 이것은 현재의 모든 iPad 해상도에서 작동하도록 보장되며 향후 애플이 결정하기를 원할 것입니다.

이것은 귀하의 질문에 대한 답변이 아니지만 "하지 마십시오"라고 말하는 것보다 더 유용하기를 바랍니다.

iPad Mini를 감지하는 대신, 사용자가 컨트롤을 타격하는 데 어려움을 겪고 있거나 (또는 ​​컨트롤의 하위 영역에서 지속적으로 충돌하고 있음) 감지하여 컨트롤의 크기를 늘리거나 줄이면이를 수용 할 수 있습니까?

더 큰 제어가 필요한 사용자는 하드웨어에 관계없이 제어 할 수 있습니다. 더 큰 컨트롤이 필요하지 않고 더 많은 콘텐츠를보고 싶은 사용자도 마찬가지입니다. 하드웨어를 감지하는 것만 큼 간단하지는 않지만 제대로해야 할 미묘한 것들이 있지만, 신중하게 수행하면 정말 좋을 수 있습니다.

이것은 영화 평형에서 인용 한 것을 상기시켜줍니다.

"그라마 톤 성직자에게서 무기를 빼내는 가장 쉬운 방법은 무엇입니까?"

"당신은 그를 요구합니다."

우리는 때때로 해결책을 찾기 위해 싸우는 데 익숙합니다. (우리가 일반적으로하지 않는 이유는 있지만 항상 옵션입니다.) 여기에있는 모든 제안은 훌륭하지만 간단한 해결책은 프로그램을 시작할 때 사용중인 iPad를 묻는 것입니다. .

나는 이것이 건방진 대답이라는 것을 알고 있지만, 우리가 모든 것을 위해 싸울 필요가 없다는 것을 상기시키기를 바랍니다. (나는 downvotes를 위해 자신을 자랑했다. : P)

몇 가지 예 :

• OS 설치 중 키보드 감지 기능이 특정 키보드를 감지하지 못하는 경우가 있으므로 설치 프로그램에 문의해야합니다.
• Windows는 연결 한 네트워크가 홈 네트워크인지 아니면 공용 네트워크인지 묻습니다.
• 컴퓨터는 사용하려는 사람을 감지 할 수 없으므로 사용자 이름과 비밀번호가 필요합니다.

행운을 빕니다-멋진 솔루션을 찾으시기 바랍니다! 그러나 당신이 이것을 잊지 않으면, 이것을 잊지 마십시오.

질문에 대답하지 않고 질문 뒤에있는 질문 :

작은 화면에서 사용자 경험을 향상시키는 것이 목표입니다. UI 컨트롤의 모양은 그 일부입니다. UX의 또 다른 부분은 응용 프로그램이 응답하는 방식입니다.

탭에 반응하는 영역을 iPad Mini에서 사용자에게 친숙해 지도록 충분히 크게 만들면서 UI 컨트롤을 시각적으로 표현할 수있을 정도로 작게 유지하면서 iPad를 시각적으로 만족시킬 수 있다면 어떨까요?

시각적 영역에없는 탭을 충분히 모은 경우 UI 컨트롤의 시각적 배율을 ​​결정할 수 있습니다.

보너스로, 이것은 iPad에서도 큰 도움이됩니다.

여기에있는 모든 솔루션은 미래에 보장되지 않습니다 (애플이 iPad 2와 동일한 화면 크기이지만 iPad Mini와 동일한 해상도의 iPad를 출시하지 못하게합니다). 그래서 나는 아이디어를 생각해 냈습니다.

너비가 1 인치 인 div를 만들어 본문에 추가하십시오. 그런 다음 너비가 100 % 인 다른 div를 만들어 본문에 추가합니다.

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

jQuery width () 함수는 항상 픽셀 단위로 값을 반환하므로 다음과 같이 할 수 있습니다.

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

screenSize는 이제 응용 프로그램 에서 사용할 수 있는 크기 를 인치 단위로 유지합니다 (반올림 오류를 방지합니다). 이를 사용하여 원하는 방식으로 GUI를 배치 할 수 있습니다. 또한 나중에 쓸모없는 div를 제거하는 것을 잊지 마십시오.

Kaspars가 제안한 알고리즘은 사용자가 응용 프로그램을 전체 화면으로 실행하는 경우 작동하지 않을뿐만 아니라 Apple이 브라우저 UI를 패치하면 작동하지 않습니다.

이것은 장치를 차별화하지는 않지만 편집에서 설명했듯이 실제로 알고 싶은 것은 장치 화면 크기입니다. 내 생각은 정확하게 화면 크기를 알려주지는 않지만 GUI를 그리는 데 사용할 수있는 실제 크기 (인치)보다 훨씬 유용한 정보를 제공합니다.

편집 : 이 코드를 사용하여 실제로 장치에서 작동하는지 확인하십시오. 테스트 할 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.4``로 판매되는 동안 15.49를 반환하는 랩톱에서 작동하는 것 같습니다. 누구든지 iPad에서 이것을 테스트하고 의견을 게시 할 수 있습니까? 전체 화면으로 실행하는 것을 잊지 마십시오.

EDIT2 : 테스트 한 페이지에 충돌하는 CSS 가있는 것으로 나타났습니다 . 테스트 코드가 올바르게 작동하도록 수정했습니다. div에서 position : absolute가 필요하므로 높이를 % 단위로 사용할 수 있습니다.

EDIT3 : 약간의 연구를했는데 실제로 어떤 장치에서나 화면 크기를 얻을 수있는 방법이없는 것 같습니다. OS가 알 수있는 것이 아닙니다. CSS에서 실제 단위를 사용하는 경우 실제로는 화면의 일부 속성을 기반으로 한 추정치입니다. 말할 필요도없이 이것은 전혀 정확하지 않습니다.

테스트하지는 않았지만 오디오 파일을 재생하고 밸런스를 확인하는 대신 마이크를 듣고 배경 소음을 추출하고 "색상"(주파수 그래프)을 계산할 수 있습니다. IPad Mini에 IPad 2와 다른 마이크 모델이있는 경우 배경색이 상당히 달라야하며 일부 오디오 지문 기술은 사용중인 장치를 알려주는 데 도움이 될 수 있습니다.

나는이 특별한 경우에 그것이 실현 가능하고 번거로울만한 가치가 있다고 생각하지 않지만, 건물 내에서 어디에 있는지 알려주기 위해 배경 소음을 지문 처리하는 것이 일부 응용 프로그램에서 사용될 수 있다고 생각 합니다 .

iPad 2에 관한 Douglas의 질문을 바탕으로 new webkitAudioContext().destination.numberOfChannels몇 가지 테스트를하기로 결정했습니다.

numberOfChannels 확인이 2iPad mini에서 반환 되었지만 iOS 5 및 2iOS 6 이 설치된 iPad 2에서는 반환 되지 않았습니다 .

그런 다음 webkitAudioContext를 사용할 수 있는지 확인하려고했습니다.

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

여기에서도 동일합니다. iOS 6이 장착 된 iPad 2 및 iPad 2는 true를 반환하고 iOS 5가 장착 된 iPad 2는 false를 반환합니다.

(이 테스트는 데스크탑에서 작동하지 않습니다. webkitAudioContext가 함수인지 데스크탑을 확인하십시오.)

시험해 볼 코드는 다음과 같습니다. http://jsfiddle.net/sqFbc/

1 "x1"너비의 div를 묶어 경계 상자가 1 인치에서 2 인치로 점프 할 때까지 부모 div에 하나씩 추가하면 어떻게됩니까? 미니의 1 인치는 iPad의 1 인치와 같은 크기입니다.

iOS7에는 사용자가 조정할 수있는 시스템 전체 설정이 있습니다. 너무 작아서 읽을 수없는 경우 텍스트 크기 설정을 변경할 수 있습니다.

해당 텍스트 크기를 사용하여 적절한 크기의 UI를 구성 할 수 있습니다 (예 : 버튼 (텍스트 크기 설정 변경에 반응하기 위해 iPad Mini Retina에서 테스트)).

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

( jsfiddle 및 cssbuttongenerator 덕분에 샘플 버튼 CSS)

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

캔버스 크기 조정에 이것이 필요하므로 사용 사례에서 기능 감지가 가능합니다.