HTML5でiPad Miniを検出する
AppleのiPad Miniは、必要以上に多くの点でiPad 2の小さなクローンです。 JavaScriptでは、window.navigatorオブジェクトはMiniとiPad 2に対して同じ値を公開します。これまでのところ、違いを検出するためのテストは成功しませんでした。
何でこれが大切ですか？
IPad MiniとiPad 2の画面はピクセルが同じですが、実際のサイズ（インチ/センチ）が異なるため、 PPI （インチあたりのピクセル）が異なります。
Webアプリケーションとゲームが使いやすいユーザーインターフェイスを提供するために、特定の要素はユーザーの親指または指の位置に合わせてサイズが調整されるため、特定の画像またはボタンをスケーリングして、より良いユーザーエクスペリエンスを提供することができます。
私がこれまでに試したもの（いくつかのかなり明白なアプローチを含む）：
window.devicepixelratio- CSSエレメントの幅（cm単位）
- CSSメディアクエリ（
resolutionや-webkit-device-pixel-ratioなど） - 類似ユニットのSVG図面
- あらゆる種類のCSS Webkit変換を一定の時間実行し、
requestAnimFrameでレンダリングされたフレームをカウントします（測定可能な差を検出したいと考えていました）
私はアイデアが新鮮です。あなたはどう？
Updateこれまでの回答に感謝します。私は、Appleがそれらをすべて支配するための1つのガイドラインであるため、iPad miniと2を検出することに反対する人々にコメントしたいと思います。さて、ここで、私が世界で本当に理にかなっていると思う理由を説明します。iPadminiまたは2のどちらを使用しているかを知ることです。
IPad miniは、はるかに小さいデバイス（9.7インチ対7.9インチ）であるだけでなく、そのフォームファクターによって異なる使用法が可能になります。 iPad 2は通常、ゲーム中は両手で保持されます チャックノリス でない限り。ミニは小さくなりますが、非常に軽量で、片手で持ち、別の手でスワイプやタップなどを行うゲームプレイも可能です。ゲームデザイナーおよび開発者として、私はknowがミニである場合、プレイヤーに別のコントロールスキームを提供することを選択できるようにしたいだけです。欲しい（たとえば、プレーヤーのグループでA/Bテストを行った後）。
どうして？まあ、ほとんどのユーザーがデフォルト設定で行く傾向があることは実証済みの事実であるため、プレーヤーがロードするときに仮想サムスティックを省いて、画面に他のタップベースのコントロールを配置します（ここに任意の例を挙げます）私にとって、そしておそらく他のゲームデザイナーにとって初めてのゲームは、ができることです。
だから私見これは太い指/ガイドラインの議論を超えており、Appleと他のすべてのベンダーがすべきことです：私たちがあなたのデバイスを一意に識別できるようにし、異なることを考えてくださいfollowingガイドラインの代わりに。
ステレオオーディオファイルを再生し、右チャンネルと左チャンネルの音量が大きい場合の加速度計の応答を比較します。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デバイスでこのようなことを行うことができます。
次のようなものを使用することもできます。
「可能な限り最高のブラウジングエクスペリエンスを提供するため、デバイスタイプを検出してウェブサイトをデバイスに合わせてカスタマイズしようとしています。残念なことに、これは常に可能ではなく、iPad 2を使用するかiPadを使用するかを現在判断できませんこれらの方法を使用してミニ。
最適なブラウジングエクスペリエンスを得るには、使用しているデバイスを以下から選択してください。
この選択は、このデバイス上のWebサイトへの今後のアクセスのために保存されます。
[] 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は、違いを教えないように意図的に試みているようです。 Appleは、iPadのサイズが異なるバージョンに対して異なるコードを記述することを望まないようです。私自身はAppleの一部ではないので、私はこれを確かに知りません、私はこれがそれがどのように見えるかと言っているだけです。たぶん、開発者コミュニティがiPad mini用の派手な検出器を思いついたら、AppleはiOSの将来のバージョンでその検出器を故意に破壊するかもしれません。 Appleは、最小ターゲットサイズを44 iOSポイントに設定することを望んでおり、iOSは、iPadの大きいサイズと小さいiPhone/iPadミニサイズの2つのサイズで表示します。 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 User Agentは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が得られます。
これらの2つの数値が異なり、互いに素であれば、実稼働環境でbattery.level * iPad2TotalLevelとbattery.level * iPadMiniTotalLevelを計算できます。どちらが整数に近いかは、使用されているデバイスを示します。
この回答のifsの数については申し訳ありません！うまくいけば、もっと良いものが来るでしょう。
編集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ボタンは、アプリケーションへのエントリプロセスの一部として非表示にできると想像します。たとえば、ゲームの場合は、「Play」ボタンや、ユーザー名の付いたさまざまなボタンや、プレイするレベルを選択する手段などがあります。アイデアが得られます。 sense_arrayボタンは、ゲームに参加するためにユーザーがタッチする必要がある場所であればどこにでも配置できます。
編集2：それほど多くのセンスボタンはおそらく必要ないことに注意してください。巨大なアスタリスク*のように配置された同心円またはボタンのセットは、うまくいくかもしれません。あなたは実験する必要があります。
私の古い答えでは、以下に、コインの両面を提供しています。
古い回答：
正しい答えは、これをしないでください。それは悪い考えです。
ボタンが小さすぎてミニで使用できない場合は、ボタンを大きくする必要があります。
ネイティブのiOSアプリを作成することで何かを学んだのであれば、Appleを凌sしようとすることは、過度の苦痛と悪化の公式だということです。彼らがあなたのデバイスを識別することを許可しないことを選択した場合、それは、彼らのサンドボックスでは、そうすべきではないからです。
ポートレートとランドスケープのサイズ/場所を調整していますか？
マイクロベンチマークについては、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 File API を使用して解像度を検出します。 iPad Miniの写真は、カメラの改善により高解像度になります。
非表示のキャンバス要素を作成して、キャンバスAPIを使用してPNG/JPGに変換することもできます。私はそれをテストする方法がありませんが、結果のビットmightは、基礎となる圧縮アルゴリズムとデバイスのピクセル密度のために異なります。
あなたはいつもユーザーに尋ねることができますか？！
ユーザーがボタンまたはコンテンツを表示できない場合は、スケーリングを自分で管理する方法をユーザーに提供します。コンテンツ（テキスト/ボタン）を大きく/小さくするために、サイトにスケーリングボタンを常に組み込むことができます。これは、（ほとんど）現在のiPadの解像度で動作することが保証され、おそらくAppleが決定した将来の解像度でも動作することが保証されます。
これは提示されたあなたの質問に対する答えではありませんが、「それをしないで」と言うよりも役に立つと思います。
IPad Miniを検出する代わりに、ユーザーがコントロールを押すのに苦労している（または、コントロールのサブ領域で常にヒットしている）ことを検出し、それらに対応するためにコントロールのサイズを拡大/縮小しませんか？
より大きなコントロールが必要なユーザーは、ハードウェアに関係なくそれらを取得します。より大きなコントロールを必要とせず、より多くのコンテンツを表示したいユーザーも同様です。ハードウェアを検出するだけの簡単なことではなく、いくつかの微妙な点がありますが、慎重に行えば、本当に素晴らしいものになるでしょう。
これは映画の均衡からの引用を思い出させます：
「グラマトンクレリックから武器を手に入れる最も簡単な方法は何だと思いますか？」
「あなたは彼にそれを求めます。」
私たちは、解決策を求めて戦うことに慣れています。時には、尋ねた方がよい場合もあります。 （通常これを行わないのには十分な理由がありますが、それは常にオプションです。）ここでの提案はすべて素晴らしいですが、簡単な解決策は、起動時に使用しているiPadをプログラムに尋ねることです。 。
これはちょっと生意気な答えであることは知っていますが、すべてのために戦う必要はないということを思い出させてくれることを願っています。 （私は下票を引き受けました。：P）
いくつかの例：
- OSインストール中のキーボード検出では、特定のキーボードを検出できない場合があるため、インストーラーが確認する必要があります。
- Windowsは、接続先のネットワークがホームネットワークかパブリックネットワークかを尋ねます。
- コンピューターは、使用しようとしている人を検出できないため、ユーザー名とパスワードが必要です。
幸運を祈ります-素晴らしい解決策を見つけてください！ただし、これを忘れないでください。
質問に答えていませんが、質問の背後にある質問：
あなたの目標は、小さな画面でユーザーエクスペリエンスを向上させることです。 UIコントロールの外観はその一部です。 UXのもう1つの部分は、アプリケーションの応答方法です。
UIコントロールの視覚的表現をiPadで視覚的に満足できるほど小さく保ちながら、iPad Miniでユーザーフレンドリーになるのに十分な大きさのタップに応答する領域を作成するとどうなりますか？
視覚領域にない十分なタップを収集した場合、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を描画するために使用できる実際のサイズ（インチ単位）というさらに有用な情報が得られます。
EDIT：このコードを使用して、実際にデバイスで動作するかどうかを確認します。テストする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 2でのnew webkitAudioContext().destination.numberOfChannelsに関する Douglas の質問に基づいて、いくつかのテストを実行することにしました。
NumberOfChannelsを確認すると、iPad miniでは2が返されましたが、iOS 5ではiPad 2では、iOS 6では2も返されませんでした。
次に、webkitAudioContextが利用可能かどうかを確認しようとしました
var hasWebkitAudio = typeof(webkitAudioContext) === "object";
alert(hasWebkitAudio);
IPad MiniとiOS 6を搭載したiPad 2はtrueを返しますが、iOS 5を搭載したiPad 2はfalseを返します。
（このテストはデスクトップでは機能しません。webkitAudioContextが関数であるかどうかをデスクトップで確認するためです）。
試してみるコードは次のとおりです。 http://jsfiddle.net/sqFbc/
テストされていませんが、オーディオファイルを再生してバランスを確認する代わりに、マイクを聞いて、背景ノイズを抽出し、その「色」（周波数グラフ）を計算することができます。 IPad MiniがIPad 2とは異なるマイクモデルを持っている場合、その背景色はかなり異なるはずであり、オーディオフィンガープリント技術によっては、どのデバイスが使用されているかがわかる場合があります。
この特定のケースでは実現可能で面倒な価値があると真剣に考えているわけではありませんが、一部のアプリではバックグラウンドノイズのフィンガープリントを使用できます。建物の中にあります。
IOS7には、ユーザーが微調整できるシステム全体の設定があります。物が小さすぎて読めない場合、Text Size設定を変更できます。
そのテキストサイズを使用して、もっともらしい寸法のUIを作成できます。ボタンの場合（iPad Mini Retinaでテストして、テキストサイズの設定変更に反応する）：
padding: 0.5em 1em 0.5em 1em;
font: -Apple-system-body;
（ sample ボタンCSS、jsfiddleとcssbuttongeneratorのおかげ）
境界ボックスが1インチから2インチにジャンプするまで、1 "x1"幅のdivの束を作成し、それらを1つずつ親divに追加するとどうなりますか？ミニの1インチは、iPadの1インチと同じサイズですか？
キャンバスを作成して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);
キャンバスのサイズ設定にこれが必要なので、ユースケースで機能を検出します。