HTML5에서 iPad Mini 검출

HTML5에서 iPad Mini 검출

애플의 아이패드 미니는 우리가 원하는 것보다 더 많은 면에서 아이패드2의 작은 복제품이다.JavaScript에서는window.navigator오브젝트는 Mini 및 iPad 2에 동일한 값을 표시합니다.그 차이를 알아내기 위한 지금까지의 내 테스트는 성공으로 이어지지 않았다.

이게 왜 중요하죠?

iPad Mini 와 iPad 2 의 화면은 픽셀은 같지만, 실제의 크기(인치/cm)는 다르기 때문에, PPI(인치당 픽셀)는 다릅니다.

편리한 사용자 인터페이스를 제공하는 웹 어플리케이션 및 게임의 경우 사용자의 엄지손가락이나 손가락 위치에 따라 특정 요소의 크기가 조정되기 때문에 특정 이미지 또는 버튼의 크기를 조정하여 사용자 경험을 향상시킬 수 있습니다.

지금까지 시도해 본 것(몇 가지 분명한 접근법 포함):

• window.devicepixelratio
• CSS 요소 폭(cm 단위)
• CSS 미디어 쿼리(예:resolution그리고.-webkit-device-pixel-ratio)
• 유사한 단위의 SVG 도면
• 설정된 시간 동안 모든 종류의 CSS Webkit 변환을 수행하고 렌더링된 프레임을 카운트합니다.requestAnimFrame(측정할 수 있는 차이를 검출하고 싶었습니다)

아이디어가 막 떠올랐어요.당신은요?

업데이트 지금까지의 답변 감사합니다.저는 애플이 아이패드 미니 대 2를 감지하는 것에 대해 반대표를 던진 사람들에 대해 언급하고 싶습니다.좋아요, 왜 사람들이 iPad mini를 사용하는지 아니면 2를 사용하는지를 아는 것이 정말 이치에 맞는다고 생각하는지에 대한 제 논리는 다음과 같습니다.그리고 내 추리로 네가 좋아하는 걸 해.

iPad mini는 훨씬 더 작은 장치일 뿐만 아니라(9.7인치 대 7.9인치) 폼 팩터로 다른 용도로 사용할 수 있습니다.Chuck Norris가 아니라면 iPad 2는 게임을 할 때 보통 두 손으로 잡습니다.mini는 작지만 가볍고 한 손에 들고 다른 손으로 문지르거나 탭하거나 하는 게임도 할 수 있습니다.게임 디자이너이자 개발자로서 미니인지 알고 싶기 때문에 필요에 따라 플레이어에게 다른 컨트롤 스킴을 제공할 수 있습니다(예를 들어 플레이어 그룹과의 A/B 테스트 후).

왜일까요? 대부분의 사용자가 기본 설정을 사용하는 경향이 있기 때문에 플레이어가 게임을 처음 로드할 때 가상 엄지스틱을 생략하고 다른 탭 기반 컨트롤을 화면에 띄우는 것(여기서 임의의 예를 제시함)이 나와 다른 게임 디자이너가 하고 싶은 일입니다.한다.

따라서 IMHO는 단순한 손가락/가이드라인에 대한 논의를 넘어 Apple과 다른 모든 벤더가 해야 할 일입니다. 즉, 델이 가이드라인을 따르는 대신 고객님의 기기를 고유하게 식별하고 다른 생각을 할 수 있도록 하는 것입니다.

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

데이터 수집에 도움이 필요하시면 이 페이지를 방문하여 이 엉뚱한 아이디어를 위한 데이터 수집을 도와주시기 바랍니다.저는 iPad mini를 가지고 있지 않기 때문에 당신의 도움이 꼭 필요합니다.

업데이트: 이 값은 탭 작성 시 뷰포트 폭과 높이를 보고하는 것으로 보이며 회전 시 변경되지 않으므로 이 메서드는 디바이스 검출에 사용할 수 없습니다.

다음 중 하나를 사용할 수 있습니다.screen.availWidth또는screen.availHeightiPad 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/

이게 좀 저속한 해결책인 건 알지만, 아직 다른 건 생각해 낼 수 없을 것 같아서요.

다른 디바이스의 대부분은 이미 체크하고 있다고 생각하기 때문에 다음과 같은 시나리오가 가능합니다.

특별한 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 디바이스에서 사용할 수 있을 것입니다.

다음과 같은 방법을 사용할 수도 있습니다.

「최적의 브라우징 체험을 제공하기 위해서, 델은, 디바이스 타입을 검출해, Web 사이트를 디바이스에 맞추어 커스터마이즈 하려고 합니다.유감스럽게도 제한사항으로 인해 항상 가능한 것은 아니며 현재 이러한 방법을 사용하여 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"아이패드2가 공개되는 동안 빌드 넘버로 사용됩니다."10A5376e".

이 값은 사용자 에이전트의 regex를 통해 쉽게 얻을 수 있습니다(window.navigator.userAgent); 이 번호의 선두에는 "가 붙습니다.Mobile/".

유감스럽게도 이것이 iPad Mini를 감지하는 유일한 확실한 방법입니다.viewport관련 접근법(지원되는 경우 vh/vw 장치 사용)을 사용하여 다양한 화면 크기로 콘텐츠를 올바르게 표시합니다.

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

애플은 일부러 당신이 차이를 말하도록 하지 않는 것처럼 보인다.애플은 우리가 아이패드의 다른 사이즈 버전에 다른 코드를 쓰는 것을 원하지 않는 것 같다.애플에 소속되어 있지 않기 때문에, 확실히는 모릅니다.이렇게 보이는 것을 말하는 것입니다.만약 개발자 커뮤니티가 아이패드 미니를 위한 멋진 검출기를 고안한다면, 애플은 향후 iOS 버전에서 의도적으로 그 검출기를 망가뜨릴지도 모른다.Apple은 최소 목표 크기를 44개의 iOS 포인트로 설정하기를 희망하고 있으며, iOS는 이를 두 가지 크기로 표시합니다. 큰 iPad 사이즈와 작은 iPhone/iPad 미니 사이즈입니다.44포인트는 충분히 넉넉하고, 사용자는 자신이 작은 iPad에 있는지 확실히 알 수 있기 때문에 스스로 보상할 수 있습니다.

디텍터를 요구하는 이유인 최종 사용자의 편의를 위해 목표 크기를 조정할 것을 권장합니다.큰 아이패드와 작은 아이패드에서 한 사이즈로 디자인하기로 결정함으로써 모든 사람이 같은 크기의 손가락을 가지고 있다는 것을 알 수 있습니다.아이패드2와 아이패드 미니의 크기가 다를 정도로 꽉 끼는 디자인이라면 저와 아내의 손가락 크기보다 더 큰 차이가 납니다.따라서 iPad 모델이 아닌 사용자의 손가락 크기를 보정하십시오.

손가락 크기를 측정하는 방법에 대한 제안이 있습니다.저는 iOS 원어민 개발자이기 때문에 HTML5로 할 수 있을지 모르겠지만, 원어민 앱에서 손가락 크기를 측정하는 방법은 다음과 같습니다.사용자가 두 물체를 꼬집어서 얼마나 가까이 오는지 측정하게 할 수 있습니다.손가락이 작을수록 객체가 가까워지며, 이 측정을 사용하여 배율 계수를 도출할 수 있습니다.이것은 iPad 사이즈에 맞추어 자동적으로 조정됩니다.같은 사람이 iPad mini의 스크린 포인트를 iPad 2보다 더 크게 측정할 수 있습니다.게임의 경우 이를 보정 단계라고 부르거나 호출하지 않을 수 있습니다.그것을 시작 단계로 삼아라.예를 들어, 슈팅 게임에서는 플레이어가 꼬집는 동작으로 탄약을 총 안에 넣도록 합니다.

사용자에게 수천 피트 상공에서 iPad를 떨어뜨리도록 요청합니다.그런 다음 내부 가속도계를 사용하여 iPad가 터미널 속도에 도달하는 데 걸리는 시간을 측정합니다.큰 iPad는 드래그 계수가 크며 iPad Mini보다 짧은 시간에 터미널 속도에 도달할 수 있습니다.

다음은 시작할 수 있는 샘플 코드입니다.

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

Apple이 불가피하게 다음 iPad를 다른 폼 팩터로 출시할 때 이 코드를 다시 사용해야 합니다.하지만 나는 당신이 모든 것을 잘 알고 있고 새로운 버전의 아이패드에 대한 해킹을 유지할 것이라고 확신한다.

유감스럽게도, 현시점에서는 이것이 불가능할 것 같습니다.http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

이틀 전에 처음 발견된 문제에 대해 트윗을 했습니다."아이패드 미니 사용자 에이전트는 아이패드2와 동일한 것으로 확인되었습니다."사용자 에이전트의 스니핑은 나쁜 관행이며 디바이스가 아닌 기능을 검출해야 한다는 답변이 수백 건 접수되었습니다.

네, 여러분, 맞아요. 하지만 그 문제와는 직접적인 관계가 없어요.그리고 두 번째 나쁜 소식도 덧붙여야 합니다. "기능 검출"을 위한 클라이언트 측 기술은 없습니다.

와일드 샷이지만 아이패드2와 아이패드 미니의 차이점 중 하나는 3축 자이로스코프가 없다는 것이다.WebKit 디바이스 오리엔테이션 API를 사용하여 어떤 종류의 정보를 얻을 수 있는지 확인할 수 있을 것입니다.

예를 들어, 이 페이지에서는, 다음의 명령어만 취득할 수 있는 것을 나타내고 있는 것 같습니다.rotationRate장치에 자이로스코프가 있는 경우 값을 지정합니다.

죄송합니다. 저는 iPad mini에 액세스할 수 없습니다.이 오리엔테이션 API에 대해 좀 더 알고 있는 사람이 여기에 끼어들 수 있을지도 모릅니다.

음, 아이패드2와 아이패드미니는 다른 크기의 배터리를 가지고 있다.

iOS 6에서 지원하는 경우 현재 배터리 레벨은0.0..1.0사용.window.navigator.webkitBattery.level하드웨어 또는 소프트웨어 중 어느 수준에서는 다음과 같이 계산됩니다.CurrentLevel / TotalLevel여기서 둘 다 ints입니다.만약 그렇다면, 그 결과 플로트가 생성될 것이고, 이는 다음 중 하나의 배수이다.1 / TotalLevel두 장치 모두에서 배터리 레벨 판독치를 많이 가져와서 계산하면battery.level * n모든 결과가 정수에 가까워지기 시작하는 값 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 버튼은 사용자가 게임에 참여하기 위해 터치해야 하는 모든 위치에 존재할 수 있습니다.

EDIT 2: 감지 버튼은 그다지 필요하지 않습니다.큰 별자리처럼 배치된 동심원 또는 버튼 세트*괜찮을지도 몰라넌 실험을 해야 해.

내 예전 대답으로, 아래, 동전의 양면을 알려줄게.

오래된 답변:

정답은 다음과 같습니다.이러지마세요.좋은 생각이 아니야.

버튼이 너무 작아서 Mini에서 사용할 수 없는 경우에는 버튼을 더 크게 해야 합니다.

네이티브 iOS 앱을 실행하면서 배운 것이 있다면 애플을 앞지르려는 것은 과도한 고통과 악화의 공식이라는 것이다.장치를 식별하지 못하도록 선택했다면 샌드박스에서는 식별하면 안 되기 때문입니다.

혹시 세로와 가로 사이즈의 조정은 하고 계신가요?

마이크로 벤치마크는 iPad 2에서는 X마이크로초, iPad mini에서는 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 사진은 카메라가 개선되어 해상도가 높아집니다.

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

항상 사용자에게 물어볼 수 있다고?!

사용자가 버튼이나 내용을 볼 수 없는 경우 스케일링을 직접 관리할 수 있는 방법을 제공합니다.항상 사이트에 일부 스케일링 버튼을 삽입하여 내용(텍스트/버튼)을 더 크게/더 작게 만들 수 있습니다.이는 현재 iPad 해상도 및 향후 Apple이 원하는 해상도에 대해 작동한다는 것을 (거의) 보장합니다.

이것은 당신의 질문에 대한 답변은 아니지만, "그러지 마세요"라고 말하는 것보다 더 유용하기를 바랍니다.

iPad Mini를 감지하는 대신 사용자가 컨트롤을 누르는데 어려움을 겪고 있음을 감지하고(또는 컨트롤의 하위 영역에서 계속 누르고 있음), 컨트롤의 크기를 조정하여 컨트롤에 맞게 확대/축소하는 것은 어떻습니까?

하드웨어에 관계없이 더 큰 컨트롤을 필요로 하는 사용자는 더 큰 컨트롤을 필요로 하지 않고 더 많은 콘텐츠를 보고 싶은 사용자도 마찬가지입니다.단순히 하드웨어를 감지하는 것만이 간단한 것이 아니라, 올바르게 하기 위한 몇 가지 미묘한 문제가 있지만, 신중하게 하면 매우 좋을지도 모릅니다.

이것은 영화 "균형:"의 인용구를 생각나게 한다.

"그래머톤 성직자로부터 무기를 얻는 가장 쉬운 방법은 무엇일까요?"

"그에게 부탁해"

우리는 해결책을 찾기 위해 싸우는 데 익숙해져 있습니다.때로는 물어보는 것이 더 나을 수도 있습니다.(보통 우리가 이것을 하지 않는 데는 좋은 이유가 있지만, 그것은 항상 선택 사항입니다.)여기에 제시된 모든 제안은 훌륭하지만 간단한 해결책은 프로그램을 시작할 때 어떤 iPad를 사용하고 있는지 묻는 것입니다.

좀 건방진 답변인 건 알지만, 모든 것을 위해 싸우지 않아도 된다는 것을 상기시켜 주셨으면 합니다. (저는 다운베이스를 위해 마음을 다잡았습니다. :P)

몇 가지 예:

• OS 의 인스톨중에 키보드가 인식되는 경우는, 특정의 키보드가 인식되지 않는 경우가 있기 때문에, 인스톨러에 문의할 필요가 있습니다.
• Windows 에서는, 접속하는 네트워크가 홈 네트워크인지 퍼블릭 네트워크인지를 묻습니다.
• 컴퓨터는 그것을 사용하려는 사람을 탐지할 수 없기 때문에 사용자 이름과 패스워드가 필요합니다.

행운을 빌어요. 멋진 해결책을 찾길 바래요!그래도 잊지 않는다면, 이걸 잊지 마세요.

질문에 대한 답변이 아니라 질문 뒤에 있는 질문:

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

iPad Mini에서 사용자가 사용하기 편리할 정도로 탭이 반응하는 영역을 크게 하고 iPad에서 UI 컨트롤의 시각적 표시를 충분히 작게 유지하면 어떨까요?

시각적 영역에 없는 탭을 충분히 수집한 경우 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();

이제 screen Size는 응용 프로그램에서 사용 가능한 크기(단, 반올림 오류)를 유지합니다.이를 사용하여 GUI를 원하는 대로 배치할 수 있습니다.그리고 쓸모없는 점괘는 나중에 빼는 것도 잊지 마세요.

또, Kaspars가 제안하는 알고리즘은, 유저가 애플리케이션을 풀 스크린으로 실행하고 있는 경우는 동작하지 않을 뿐만 아니라, Apple이 브라우저 UI 에 패치를 적용했을 경우, 동작하지 않게 되는 것에 주의해 주세요.

이것은 디바이스를 구별하지 않지만, 편집 시 설명했듯이 실제로 알고 싶은 것은 디바이스 화면 크기입니다.또, 화면 사이즈는 정확하게는 알 수 없지만, GUI를 그릴 때 사용할 수 있는 실제 사이즈(인치 단위)에 대해서는, 한층 더 유용한 정보를 얻을 수 있습니다.

편집: 이 코드를 사용하여 장치에서 실제로 작동하는지 확인합니다.테스트할 아이패드가 없습니다.

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'로 판매되고 있습니다.아이패드로 테스트해서 댓글 달아주시면 안 돼요?전체 화면으로 실행하는 것을 잊지 마십시오.

EDIT2: 테스트한 페이지에 모순되는 CSS가 있는 것으로 나타났습니다.저는 현재 정상적으로 작동하도록 테스트 코드를 수정했습니다.높이(%)를 사용할 수 있도록 절대 위치(divs)

EDIT3: 조사를 해봤는데, 실제로 어떤 기기에서든 화면 크기를 알 수 있는 방법은 없는 것 같습니다.OS가 알 수 있는 것은 아닙니다.CSS에서 실제 단위를 사용하는 경우, 실제로는 화면의 일부 속성에 근거한 추정일 뿐입니다.말할 필요도 없이 이것은 전혀 정확하지 않다.

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

이 경우 실현 가능하고 번거로운 일이 될 수 있다고는 생각하지 않지만, 예를 들어 건물 내에서의 위치를 알려주는 앱에 따라서는 백그라운드 노이즈의 지문이 사용될 수 있다고 생각합니다.

Douglas의 질문에 따르면new webkitAudioContext().destination.numberOfChannels아이패드2에서 몇 가지 테스트를 해보기로 했습니다.

반환된 채널 수를 확인하는 중2iPad mini에는 있지만 iOS 5를 탑재한 iPad 2에는 없습니다.2iOS 6에도 대응하고 있습니다.

그리고 나서 나는 웹킷을 확인하려고 했다.Audio Context 사용 가능

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

마찬가지로 iOS 6을 탑재한 iPad Mini와 iPad 2는 true를 반환하고 iOS 5를 탑재한 iPad 2는 false를 반환한다.

(이 테스트는 데스크톱에서는 동작하지 않습니다.데스크탑에서 웹킷이 있는지 확인합니다.Audio Context는 함수입니다).

테스트용 코드는 다음과 같습니다.http://jsfiddle.net/sqFbc/

만약 여러분이 1"x1" 폭의 div를 한 묶음으로 만들어서 경계 상자가 1인치에서 2인치로 뛸 때까지 하나씩 부모 div에 붙이면 어떨까요?미니의 1인치는 아이패드의 1인치와 같은 크기죠?

iOS7 에서는, 유저가 조정할 수 있는 시스템 전체의 설정이 있습니다.읽을 수 없을 정도로 작아지면, 텍스트 사이즈의 설정을 변경할 수 있습니다.

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

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

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

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

캔버스 사이징을 위해 이것이 필요하므로 사용 사례에서 기능을 감지합니다.

언급URL : https://stackoverflow.com/questions/13248493/detect-ipad-mini-in-html5