javascript - HTML5でiPadMiniを検出する

Question

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

何でこれが大切ですか？

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

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

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

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

私はアイデアが新鮮です。君はどうでしょう？

更新これまでの回答ありがとうございます。Appleにはすべてを支配するための1つのガイドラインがあるので、iPadminiと2の検出に反対票を投じている人々についてコメントしたいと思います。さて、これが私の推論です。人がiPad miniと2のどちらを使用しているかを知ることは、世界中で本当に理にかなっていると思います。そして、私の推論であなたが好きなことをしてください。

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

なんで？さて、ユーザーの大多数がデフォルト設定を使用する傾向があることは証明された事実です。そのため、プレーヤーがロードするときに、仮想サムスティックを省略し、画面に他のタップベースのコントロールを配置します（ここでは任意の例を示します）。初めてのゲームは、私、そしておそらく他のゲームデザイナーがやりたいと思っていることです。

したがって、私見では、これは太い指やガイドラインの議論を超えており、Appleや他のすべてのベンダーがすべきことです。ガイドラインに従う代わりに、デバイスを一意に識別して異なる考え方をすることができます。

score 252 · Accepted Answer

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

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

score 132 · Accepted Answer

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

iPad Mini と iPad 2 では、またはが異なるように見えるので、どちらscreen.availWidthかを使用できます。screen.availHeight

アイパッドミニ

screen.availWidth = 768
screen.availHeight = 1004

iPad2

screen.availWidth = 748
screen.availHeight = 1024

ソース: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/

score 84 · Accepted Answer

これが少しローテクな解決策かもしれないことは理解していますが、まだ他に何も思いつかないようです..

他のほとんどのデバイスを既に確認していると仮定しているため、次のシナリオが考えられます。

特別な 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 デバイスでこのようなことを行うことで使用できるようになります。

次のようなものを使用することもできます。

「可能な限り最高のブラウジング体験を提供するために、デバイスの種類を検出して、ウェブサイトをデバイスに合わせてカスタマイズしようとしています。残念ながら、制限があるため、これが常に可能であるとは限らず、現在 iPad 2 を使用しているか iPad を使用しているかを判断することはできません。これらの方法を使用してミニ。

可能な限り最高のブラウジング体験を得るために、使用しているデバイスを以下から選択してください。

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

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

"

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

score 74 · Accepted Answer

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

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

この値は、ユーザーエージェントの正規表現を使用して簡単に取得できます ( window.navigator.userAgent)。その番号の先頭には " Mobile/" が付きます。

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

score 69 · Accepted Answer

tl;dr iPad mini と iPad 2 の違いを補正しないでください。太い指と細い指を補正する場合を除きます。

Apple は意図的に、ユーザーに違いを認識させないようにしているようです。Apple は、異なるサイズの iPad のバージョンに対して異なるコードを書くことを望んでいないようです。私自身は Apple の一員ではないので、確かなことはわかりません。おそらく、開発者コミュニティが iPad mini 用の派手な検出器を思いついた場合、Apple は iOS の将来のバージョンでその検出器を故意に壊すかもしれません。Apple は、最小目標サイズを 44 iOS ポイントに設定することを望んでおり、iOS はそれを 2 つのサイズ (大きい方の iPad サイズと小さい方の iPhone/iPad mini サイズ) で表示します。44 ポイントは十分に寛大であり、ユーザーは小さい iPad を使用しているかどうかを確実に認識できるため、自分で補うことができます。

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

指のサイズの測り方を教えてください。私はネイティブの iOS 開発者なので、これが HTML5 で実現できるかどうかはわかりませんが、ネイティブアプリで指のサイズを測定する方法を次に示します。ユーザーに 2 つのオブジェクトを一緒につまんでもらい、それらがどれだけ接近するかを測定します。指が小さいほど、オブジェクトが互いに接近し、この測定値を使用して倍率を導き出すことができます。これにより、iPad のサイズに合わせて自動的に調整されます。同じ人でも、iPad 2 よりも iPad mini の方が画面上のポイントの測定値が大きくなります。はじめの一歩としてどうぞ。たとえば、シューティングゲームでは、プレイヤーにピンチモーションで銃に弾薬を入れてもらいます。

score 31 · Accepted Answer

地上数千フィートから iPad を落とすようユーザーに依頼します。次に、内部加速度計を使用して、iPad が最終速度に到達するまでの時間を測定します。大型の iPad は抗力係数が大きく、iPad Miniよりも短い時間で最終速度に到達するはずです。

開始するためのサンプルコードを次に示します。

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

Apple が必然的に次の iPad を別のフォームファクタでリリースする場合、このコードを再検討する必要があることはほぼ間違いありません。しかし、iPad の新しいバージョンが登場するたびに、このハックを最新の状態に保ち、維持していただけると確信しています。

score 28 · Accepted Answer

残念ながら、現時点ではこれは不可能のようです： http ://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

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

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

score 26 · Accepted Answer

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

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

申し訳ありませんが、有効な POC を提供できません。iPad mini にアクセスできません。これらのオリエンテーション API についてもう少し知っている人なら、ここに参加できるかもしれません。

score 20 · Accepted Answer

iPad 2 と iPad Mini では、バッテリーのサイズが異なります。

0.0..1.0iOS 6 がサポートしている場合は、を使用して現在のバッテリーレベルを取得できますwindow.navigator.webkitBattery.level。ハードウェアまたはソフトウェアのあるレベルではCurrentLevel / TotalLevel、どちらも int であるとして計算される可能性があります。もしそうなら、それはの倍数である float になり1 / TotalLevelます。両方のデバイスから多くのバッテリーレベルを読み取って計算battery.level * nすると、すべての結果が整数に近くなり始める n の値を見つけることができる場合がありiPad2TotalLevelますiPadMiniTotalLevel。

これらの 2 つの数値が異なり、互いに素である場合、本番環境ではとを計算できbattery.level * iPad2TotalLevelますbattery.level * iPadMiniTotalLevel。整数に近い方は、使用されているデバイスを示します。

この回答のifの数について申し訳ありません！うまくいけば、もっと良いものが来るでしょう。

score 18 · Accepted Answer

EDIT 1： 以下の私の最初の答えは、「やらないでください」でした。積極的になるために：

本当の問題は、iPad X 対 iPad mini とは何の関係もないと思います。ユーザーの人間工学に合わせて UI 要素の寸法と配置を最適化することだと思います。UI 要素のサイズ変更と、場合によっては配置を行うには、ユーザーの指のサイズを決定する必要があります。これも、実際にどのデバイスで実行しているかを実際に知る必要なく、おそらく到達する必要があります。誇張してみましょう: アプリは 40 インチの対角画面で実行されています。メーカーとモデル、または DPI がわからない。コントロールのサイズをどのように設定しますか?

サイト/ゲームへのゲーティング要素であるボタンを表示する必要があります。どこで、またはどのようにこれを行うことが理にかなっているのかを判断するのは、あなたに任せます。

ユーザーにはこれが 1 つのボタンとして表示されますが、実際には、1 つのボタンイメージとして表示されるように視覚的に覆われた密集した小さなボタンのマトリックスで構成されます。それぞれが 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 アプリを開発して何か学んだことがあるとすれば、それは、Apple の裏をかこうとすることは、過度の苦痛と苛立ちの方程式だということです。彼らがデバイスの識別を許可しないことを選択した場合、それは、サンドボックスでは、そうすべきではないためです.

縦向きと横向きでサイズ/位置を調整しているのだろうか？

score 11 · Accepted Answer

マイクロベンチマークについてはどうでしょうか。iPad 2 ではおよそ X マイクロ秒、iPad mini では Y 秒かかるものを計算します。

十分に正確ではないかもしれませんが、iPad mini のチップの方が効率的な命令があるかもしれません。

score 11 · Accepted Answer

はい、ジャイロスコープをチェックするのは良い点です。あなたは簡単にそれを行うことができます

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はありません。

score 8 · Accepted Answer

iPad2 ユーザーエージェントを持つすべてのユーザーに、内蔵カメラを使用して写真を提供し、 HTML ファイル APIを使用して解像度を検出することを要求します。iPad Mini の写真は、カメラの改良により高解像度になります。

非表示のキャンバス要素を作成して試し、Canvas API を使用して PNG/JPG に変換することもできます。テストする方法はありませんが、基になる圧縮アルゴリズムとデバイスのピクセル密度により、結果のビットが異なる場合があります。

score 7 · Accepted Answer

いつでもユーザーに尋ねることができますか?!

ユーザーがボタンやコンテンツを見ることができない場合は、スケーリングを自分で管理する方法を提供してください。コンテンツ（テキスト/ボタン）を大きく/小さくするために、サイトにいくつかのスケーリングボタンをいつでも組み込むことができます. これは、現在の iPad の解像度で動作することが (ほぼ) 保証されており、Apple が決定した将来の解像度で機能する可能性があります。

score 6 · Accepted Answer

これは、映画「平衡」からの引用を思い出させます。

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

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

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

これはちょっと生意気な答えだと思いますが、すべてのために戦う必要はないということを思い出させてくれることを願っています。（私は反対票を投じました。：P）

いくつかの例：

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

幸運を祈ります-素晴らしい解決策を見つけていただければ幸いです。ただし、忘れない場合は、これを忘れないでください。

score 6 · Accepted Answer

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

iPad Mini を検出する代わりに、ユーザーがコントロールを叩くのに苦労していること (または、コントロールのサブ領域を一貫して叩いていること) を検出し、それらに対応するようにコントロールのサイズを拡大/縮小してみませんか?

より大きなコントロールが必要なユーザーは、ハードウェアに関係なく入手できます。より大きなコントロールを必要とせず、より多くのコンテンツを見たいユーザーもそれを手に入れます. ハードウェアを検出するだけの単純なものではなく、正しく行うには微妙なことがいくつかありますが、慎重に行われれば、非常にうまくいく可能性があります.

score 5 · Accepted Answer

ここに挙げたすべての解決策は、将来を見据えたものではありません (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 でこれをテストしてコメントを投稿できますか? フルスクリーンで実行することを忘れないでください。

EDIT2：私がテストしたページには競合するCSSがあったことがわかりました。テストコードが正しく動作するように修正しました。高さを % で使用できるように、div に position: absolute が必要です。

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

score 5 · Accepted Answer

質問に答えるのではなく、質問の背後にある質問:

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

タップに反応する領域を iPad Mini でユーザーフレンドリになるように十分に大きくし、UI コントロールの視覚的表現を iPad で視覚的に快適になるように十分に小さくするとどうなるでしょうか?

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

おまけとして、これは iPad のビッグハンドでも機能します。

score 2 · Accepted Answer

幅 1 インチ x 1 インチの div の束を作成し、境界ボックスが 1 インチから 2 インチにジャンプするまで、それらを親 div に 1 つずつ追加するとどうなるでしょうか? mini の 1 インチは、iPad の 1 インチと同じサイズですよね?

score 2 · Accepted Answer

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

この特定のケースでは、それが実現可能であり、手間をかける価値があるとは真剣に考えていませんが、バックグラウンドノイズのフィンガープリンティングは、たとえば建物の中にいるときにどこにいるかを知るなど、一部のアプリで使用できると思います.

score 2 · Accepted Answer

iPad 2に関するDouglasの質問に基づいて、いくつかのテストを実行することにしました。new webkitAudioContext().destination.numberOfChannels

numberOfChannelsを確認2すると、iPad mini では返されましたが、iOS 5 の iPad 2 と iOS 26 では何も返されませんでした。

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

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

ここでも、iOS 6 を搭載した iPad Mini と iPad 2 は true を返し、iOS 5 を搭載した iPad 2 は false を返します。

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

試してみるコードは次のとおりです。http://jsfiddle.net/sqFbc/

javascript - HTML5でiPadMiniを検出する

23 に答える 23

アイパッドミニ

iPad2

Related

Reference