HTML5에서 iPad Mini 감지 방법으로 iPad 2의

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와 동일하다는 것이 확인되었습니다 . 사용자 에이전트 스니핑은 나쁜 습관이며 장치 등이 아닌 기능을 감지해야한다는 말 그대로 말 그대로 수백 개의 답변을 받았습니다.

네, 맞습니다. 그러나 문제와 직접적인 관계는 없습니다. 그리고 두 번째 나쁜 소식을 추가해야합니다 . “기능 감지”를 수행 할 클라이언트 측 기술은 없습니다 .