HTML5でiPad miniからのアクセスを識別することはできない
こんにちは。x-fitチーム・エバンジェリストの渡辺です。
iPad mini、発売されましたね。巷にあふれるレビュー記事を見ると、7インチのタブレット体験として絶賛する記事もあれば、Retinaディスプレイに慣れてしまっていると、残念な感じがする、という意見もあるようです。販売された台数は第4世代iPadと合わせるとすでに300万台を超えたという発表もあり、Webの閲覧端末としての7インチタブレットの存在感は大きくなるばかりです。
そんなiPad miniですが、先日Breaking the Mobile Webで、Webサイト側からiPad miniのアクセスを識別することができない、という記事が出ていました。全文の翻訳ではありませんが、概要をまとめてみました。文章中の強調は、私が入れたものも含まれます。原文と同じではありませんのでご了承ください。
HTML5でのiPad mini識別は不可能
知っての通り、iPad miniは、7.9インチのiPadとして出てきましたが、これをサーバサイド、クライアントサイドでどのように識別するかということも、大きな課題と言えます。ですが、残念なことにそれは不可能なようです。
なぜiPad miniを識別する必要があるのか
iPad miniはRetinaディスプレイではありません。解像度はiPad2と同じ768x1024ピクセルです。ですが、iPad2は9.7インチ、iPad miniは7.9インチです。これは、iPad miniは、iPad2と比べて、テキストや、タッチできるエリアを含め、すべてのものが約19%小さくなることを意味しています。これが一つ目の理由です。
アクセスしてくる端末がiPad2かiPad miniか、ということを気にすることはあまりないのかもしれませんが、dpiの違いが、ユーザビリティに影響することは大いにあり得ます。デザイナーは、そのアクセスがiPad miniからのものかによって、タッチできるエリアを広げるようにすべきでしょう。
2つ目の理由は、いわゆるアナリティクスのためです。企業やHTMLアプリ開発者の中には、どのデバイスからのアクセスかという情報を何らかの意思決定に使う可能性がある、ということです。
機能またはデバイスを識別する方法
サーバサイドにおける主な方法としては、ユーザエージェントで識別する方法があります。ただ、アップルのように、すべてのデバイスに同じユーザエージェントを使っている場合、違いは、iOSのバージョンしかありません。
読者の中には、サーバサイドでの識別に興味のない人も多いでしょう。とくにRWD（レスポンシブ・ウェブ・デザイン）では、クライアントサイドで、CSSメディアクエリーか、JavaScriptで識別している人も多いと思います。ですが、クライアントサイドでは、iPad miniを特定するための方法はありません。それぞれの方法での特定できない理由を見ていきましょう。
Media queriesを使う
CSS3 Media queriesは、resolution属性を使用できます。iPad miniは163dpi、iPad 2は132dpiですので、これで解決できそうですが、このresolution属性はiOSのSafariのようなWebKitベースのブラウザでは使用できないため、この方法は使えません。
Device Pixel Ratioを使う
標準ではないMedia queries拡張に、device pixel ratioがあります。Retinaなどの高解像度のiPadでは2という値で識別でき、JavaScriptでも値を取得することができます。ただ、iPad2とiPad miniは両方とも1を返すため、識別判断には使えません。
大きさ指定の単位にインチやセンチメートルを使う
識別とは別の解決法として、画面の大きさに関わらず単位をインチやセンチメートルで指定する方法を試してみましたが、iPad miniでは、やはり19%小さく表示されました。CSS3の仕様では、インチやセンチメートルの単位は、実サイズになるわけではないと規定されており、この方法も役に立ちません。
なぜアップルはこうしたのか
公式な理由としては、iOSの断片化を少なくするためです。開発者やデザイナは、Webサイトやアプリを作るうえで、（iPod Touchを含む）iPhoneと、iPadという2つのデバイスだけが見えている状態にできます。その考えは悪くありませんが、iPad miniはスクリーンサイズが異なるため、少なくともMedia queriesで識別できるようにしてほしいものです。
結論としては、iPad miniが識別できないことが問題なのではなく、画素密度や実際のサイズを識別できないことが問題であるということです。これはデバイスそれぞれにおいて、ベストなユーザ体験を届ける上では重要です。
解決策は？
現状では、
- viewportで、 user-scalable=noの指定があれば外して、ユーザがズームできるようにしましょう。
- テキストの大きさを変えられるような機能をつけ、それをLocal Storageやcookieに保存して、次にWebサイトに来た時にその大きさを再現できるようにしましょう。Javascirptや、-webkit-text-size-adjustプロパティでフォントサイズを変えることは可能です。
ユーザビリティを気にするWebサイトなどでは、クライアントから「iPad miniで見ると小さいから、iPad miniのときだけ大きさ調整して」という要望に応えるのは、現状では難しそうですね。
