HTML5でiPad Miniを検出する

AppleのiPad Miniは、私たちが望む以上に、iPad 2の小さなクローンです。JavaScriptでは、window.navigatorオブジェクトはMiniとiPad 2で同じ値を公開します。違いを検出するためのこれまでの私のテストでは成功していません。

何でこれが大切ですか？

iPad MiniとiPad 2の画面はピクセルは同じですが、実際のサイズ（インチ/センチメートル）が異なるため、PPI（ピクセル/インチ）も異なります。

ウェブアプリケーションやゲームで使いやすいユーザーインターフェースを提供するには、特定の要素のサイズをユーザーの親指や指の位置に応じて調整するため、特定の画像やボタンを拡大して、ユーザーエクスペリエンスを向上させることができます。

私がこれまでに試したこと（いくつかのかなり明白なアプローチを含む）：

• window.devicepixelratio
• CSS要素の幅（cm単位）
• CSSメディアクエリ（resolutionおよびなど-webkit-device-pixel-ratio）
• 同様の単位のSVG図面
• すべての種類のCSS Webkit変換を設定された時間実行し、レンダリングされたフレームをカウントしますrequestAnimFrame（測定可能な違いを検出することを望んでいました）

私はアイデアが新鮮です。あなたはどう？

アップデート これまでの回答に感謝します。iPad miniと2の検出に反対する人々にコメントしたいと思います。Appleはええと、それらすべてを支配する1つのガイドラインがあるからです。さて、ここでは、人がiPad miniまたは2のどちらを使用しているかを知ることが世界中で本当に理にかなっていると思う理由を説明します。そして、私の推論を好きなようにしてください。

iPad miniは非常に小さいデバイス（9.7インチ対7.9インチ）であるだけでなく、そのフォームファクターによってさまざまな使用法が可能になります。iPad 2は、チャックノリスでない限り、ゲームをするときは通常両手で持ちます。miniは小さくなりますが、軽量であり、片手で握り、別の手でスワイプやタップなどの操作を行うことができます。私自身、ゲームデザイナーおよび開発者として、それがミニかどうかを知りたいので、必要に応じて（たとえば、プレーヤーのグループでのA / Bテストの後に）プレーヤーに別のコントロールスキームを提供することを選択できます。

どうして？まあ、それはほとんどのユーザーがデフォルト設定で行く傾向があるので、プレーヤーがロードしたときに仮想サムスティックを省き、他のタップベースのコントロールを画面に配置することです（ここでは任意の例を示します）。初めてのゲームは、私、そしておそらく他のゲームデザイナーができることを望んでいることです。

だから私見これは細い指/ガイドラインの議論を超えて、Appleと他のすべてのベンダーがやるべきことです：ガイドラインに従うのではなく、私たちがあなたのデバイスを一意に識別し、異なることを考えられるようにします。

ステレオオーディオファイルを再生し、右チャネルと左チャネルの音量が大きい場合の加速度計の応答を比較します。iPad2にはモノラルスピーカーが搭載されていましたが、iPad Miniにはステレオスピーカーが搭載されています。

データを収集するためにあなたの助けが必要です。このページにアクセスして、このクレイジーなアイデアのデータ収集を手伝ってください。iPad miniを持っていないので、本当にあなたの助けが必要です

更新： これらの値は、タブの作成時にビューポートの幅と高さを報告しているようで、回転しても変化しないため、このメソッドはデバイスの検出に使用できません。

iPad MiniとiPad 2ではどちらか、screen.availWidthまたはscreen.availHeight違っているように見えるので、どちらでも使用できます。

アイパッドミニ

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 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かを判断する方法がない場合、少なくともWebサイトはiPad miniデバイスでこのように使用できます。

次のようなもので行くこともできます：

「最高のブラウジングエクスペリエンスを提供するために、デバイスタイプを検出してWebサイトをデバイスにカスタマイズしようとします。残念ながら、これが常に可能であるとは限らず、現在iPad 2とiPadのどちらを使用しているかを判断できません。これらのメソッドを使用してミニ。

最高のブラウジング体験を得るには、以下で使用しているデバイスを選択してください。

この選択は、このデバイスのWebサイトへの今後のアクセスのために保存されます。

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

」

私はあなたがJavascriptでクライアント側で何ができて何ができないかについて完全には詳しくありません。ユーザーのIPを取得できることはわかっていますが、ユーザーのMACアドレスを取得することは可能ですか？これらの範囲はiPad2とiPad miniで異なりますか？

私はそれが恐ろしい解決策であることを知っていますが、現時点では、iPad MiniとiPad 2を区別する唯一の方法は、ビルド番号を確認し、各ビルド番号を関連デバイスにマッピングすることです。

例を挙げましょう。iPadminiバージョン6.0は10A406ビルド番号として" "を公開していますが、iPad 2は " 10A5376e"を公開しています。

この値は、ユーザーエージェントの正規表現を使用して簡単に取得できます（window.navigator.userAgent）; その番号の前には「Mobile/」が付いています。

残念ながら、これはiPad Miniを検出する唯一の明確な方法です。viewportさまざまな画面サイズでコンテンツを適切に表示するには、関連するアプローチ（サポートされている場合はvh / vwユニットを使用）を採用することをお勧めします。

tl; dr脂肪の指と細い指の両方を補正しない限り、iPad miniとiPad 2の違いを補正しないでください。

Appleは意図的に違いを知らせないようにしようとしているようです。Appleは、サイズの異なるバージョンのiPad用に異なるコードを書いてほしくないようです。私自身はAppleの一部ではないので、はっきりとはわかりませんが、これはそのように見えるとだけ言っています。たぶん、開発者コミュニティがiPad mini用の高級検出器を思いついた場合、AppleはiOSの将来のバージョンでその検出器を故意に壊すかもしれません。Appleは最小ターゲットサイズを44 iOSポイントに設定することを望んでおり、iOSはそれを2つのサイズで表示します。大きい方のiPadサイズと小さい方のiPhone / iPadミニサイズです。44ポイントは十分寛大であり、ユーザーは自分がより小さなiPadを使用しているかどうかを確実に把握するため、自分で補償することができます。

検出器を求める理由について、エンドユーザーの快適さのためにターゲットサイズを調整することをお勧めします。大きいiPadで1つのサイズを設計し、小さいiPadで別のサイズを設計することを決定することで、すべての人が同じサイズの指を持っていると決定します。iPad 2とiPad miniとのサイズの違いが違いをもたらすほどデザインがタイトである場合、私と妻の間の指のサイズはより大きな違いをもたらします。したがって、iPadモデルではなく、ユーザーの指のサイズを補正します。

指のサイズを測定する方法について提案があります。私はネイティブiOS開発者なので、これがHTML5で実現できるかどうかはわかりませんが、ネイティブアプリで指のサイズを測定する方法を次に示します。ユーザーに2つのオブジェクトをつまんで、それらがどれだけ近づくかを測定します。指が小さいほどオブジェクトが近くなり、この測定値を使用して倍率を導き出すことができます。これは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

2日前に、最初に検出された問題についてツイートしました。「iPad MiniユーザーエージェントがiPad 2と同じであることを確認しました」。ユーザーエージェントのスニッフィングは悪い習慣であり、デバイスなどではなく機能を検出する必要があるなど、文字通り何百もの回答を受け取りました。

ええ、そうです、あなたは正しいですが、問題と直接の関係はありません。そして、2つ目の悪いニュースを追加する必要があります。「機能検出」を行うクライアント側の手法もありません。

これはワイルドショットですが、iPad 2とiPad miniの違いの1つは、前者には3軸ジャイロスコープがないことです。たぶん、WebKitデバイス方向APIを使用して、そこからどのような情報を取得できるかを確認できるでしょう。

たとえば、このページはrotationRate、デバイスにジャイロスコープが搭載されている場合にのみ値を取得できることを示唆しているようです。

申し訳ありませんが、動作するPOCを提供することはできません。iPadminiにアクセスできません。たぶん、これらのオリエンテーションAPIについてもう少し詳しく知っている人なら、ここに呼び寄せることができます。

さて、iPad 2とiPad Miniは異なるサイズのバッテリーを持っています。

iOS 6がサポートしている場合は、を0.0..1.0使用して現在のバッテリーレベルを取得できますwindow.navigator.webkitBattery.level。ハードウェアまたはソフトウェアのいずれかのレベルで、それはおそらくCurrentLevel / TotalLevel両方としてint として計算されます。もしそうなら、それはの倍数である浮動小数点数になり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ボタンは、ユーザーがゲームに参加するために触れる必要がある場所ならどこにでも置くことができます。

編集2： おそらくそれほど多くのセンスボタンは必要ないことに注意してください。巨大なアスタリスクのように配置された同心円またはボタンのセットで十分*です。実験する必要があります。

以下の私の古い答えで、私はあなたにコインの両面を与えています。

古い答え：

正解は次のとおりです。これを行わないでください。それは悪い考えです。

ボタンが小さすぎてminiで使用できなくなる場合は、ボタンを大きくする必要があります。

私がネイティブiOSアプリを実行することで何かを学んだとしたら、それはAppleを凌駕しようとすることが過度の苦痛と悪化の公式であるということです。彼らがデバイスの識別を許可しないことを選択した場合、それはサンドボックスではそうすべきではないためです。

横向きと縦向きでサイズ/位置を調整していますか？

マイクロベンチマークについては、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要素を作成して、Canvas APIを使用してPNG / JPGに変換することもできます。テストする方法はありませんが、基になる圧縮アルゴリズムとデバイスのピクセル密度のために、結果のビットが異なる場合があります。

あなたはいつもユーザーに尋ねることができますか？！

ユーザーがボタンやコンテンツを表示できない場合は、スケーリングを管理する方法をユーザーに提供します。常にサイトにいくつかのスケーリングボタンを組み込んで、コンテンツ（テキスト/ボタン）を大きく/小さくすることができます。これは、（ほぼ）現在のiPadの解像度で動作することが保証され、おそらく将来の解像度のAppleが彼らが作りたいと決心したものでしょう。

これは提示された質問に対する回答ではありませんが、「そうしないでください」と言うよりも役立つと思います。

iPad Miniを検出する代わりに、ユーザーがコントロールを叩くのに苦労している（または：コントロールのサブ領域を常に叩いている）ことを検出し、それらに対応するためにコントロールのサイズを拡大または縮小しませんか？

より大きな制御を必要とするユーザーは、ハードウェアに関係なくそれらを取得します。より大きなコントロールを必要とせず、より多くのコンテンツを表示したいユーザーもそれを取得します。これはハードウェアを検出するだけの単純なものではありません。正しく行うには微妙なことがいくつかありますが、注意深く行うと、本当にすばらしいでしょう。

これは私に映画均衡からの引用を思い出させます：

「グラマトンクレリックから武器を離す最も簡単な方法は何だと思いますか？」

「あなたは彼にそれを求めます。」

私たちは、解決策を求めて戦うことに慣れています。（私たちが通常これを行わないことには十分な理由がありますが、これは常にオプションです。）ここでの提案はすべて素晴らしいですが、簡単な解決策は、起動時に使用しているiPadをプログラムに尋ねることです。 。

これは一種の生意気な答えであることは知っていますが、すべてのために戦う必要がないことを思い出させてくれることを願っています。（私は反対投票のために自分自身を固くしました。：P）

いくつかの例：

• OSインストール時のキーボード検出では、特定のキーボードを検出できない場合があるため、インストーラーが確認する必要があります。
• Windowsは、接続するネットワークがホームネットワークかパブリックネットワークかを尋ねます。
• コンピュータはそれを使用しようとしている人を検出できないため、ユーザー名とパスワードが必要です。

幸運を祈ります-あなたが素晴らしい解決策を見つけられることを願っています！そうでない場合は、これを忘れないでください。

質問には答えませんが、質問の背後にある質問：

小さな画面でのユーザーエクスペリエンスを向上させることが目標です。UIコントロールの外観はその一部です。UXのもう1つの部分は、アプリケーションの応答方法です。

タップに反応する領域をiPad Miniでユーザーフレンドリーになるのに十分な大きさにし、UIコントロールの視覚的表現をiPadで視覚的に満足できるほど小さく保つ場合はどうでしょうか。

視覚領域にない十分な数のタップを収集した場合は、UIコントロールを視覚的にスケーリングすることを決定できます。

おまけとして、これはiPadの大きな手でも機能します。

ここでのすべてのソリューションは将来を保証するものではありません（Appleが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でこれをテストしてコメントを投稿できますか？全画面で実行することを忘れないでください。

編集2：私がテストしたページには、CSSが競合していることがわかりました。テストコードを修正して、正しく動作するようにしました。％で高さを使用できるように、div：絶対位置が必要です。

EDIT3：私はいくつかの調査を行いましたが、実際にどのデバイスでも画面のサイズを取得する方法はないようです。OSが認識できるものではありません。CSSで実際のユニットを使用する場合、それは実際には画面のいくつかのプロパティに基づく推定にすぎません。言うまでもなく、これはまったく正確ではありません。

テストされていませんが、オーディオファイルを再生してバランスをチェックする代わりに、マイクを聞いてバックグラウンドノイズを抽出し、その「色」（周波数グラフ）を計算することができます。IPad MiniのマイクモデルがIPad 2と異なる場合、それらの背景色はかなり異なるはずであり、オーディオフィンガープリント技術によっては、どのデバイスが使用中であるかを知るのに役立つ場合があります。

私はそれがこの特定のケースで実現可能で面倒な価値があると真剣に考えていませんが、背景のノイズのフィンガープリントは、例えばあなたが建物の中にいるときにあなたがどこにいるかを知らせるために、いくつかのアプリで使用できると思います。

に基づく ダグラスの質問にnew webkitAudioContext().destination.numberOfChannelsiPad 2いくつかのテストを実行することにしました。

返されたnumberOfChannelsの確認 2iPad 5でれたも、iOS 5を搭載したiPad 2および2iOS 6 では何もれませんでした。

次に、webkitAudioContextが使用可能かどうかを確認しようとしました

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

ここでも同じです。iOS6を搭載したiPad MiniおよびiPad 2はtrueを返し、iOS 5を搭載したiPad 2はfalseを返します。

（このテストはデスクトップでは機能しません。デスクトップの場合、webkitAudioContextが関数かどうかを確認してください）。

ここにあなたが試すためのコードがあります：http : //jsfiddle.net/sqFbc/

1 "x1"の幅のdivの束を作成し、境界ボックスが1インチから2インチにジャンプするまで、親divに1つずつ追加した場合はどうなるでしょうか。miniの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);

これはキャンバスのサイズ変更に必要なので、私のユースケースでの機能検出です。