iOSとAndroidのモバイルWebkitの違いと注意点

スマートフォンのサイト制作する際に、モバイルのブラウザについて知ることは非常に大切です。実際に モバイルのウェブサイトを制作すると 色んなことに気付かされたり、失敗したりします。今回、世界でも日本でもモバイルで圧倒的なシェアを誇る モバイルWebkitを調べてみました。そして CSSのサポートが悪くクライアントの案件にてサポートから外すべきブラウザがわかってきました。

モバイルブラウザシェア 2010.01 - 2011.01

http://gs.statcounter.com/#mobile_browser-ww-monthly-201001-201101

モバイルWebkitの違い

まずiPhone や Android の搭載されているブラウザは 「モバイルWebkit」といいましたが、ブラウザの研究で非常に有名なオランダの Peter Paul Koch は自身のブログで「There is no WebKit on Mobile（Webkitはモバイルには存在しない）」でどのように違うのかを説明しています。


彼は19種類のモバイルWebkitを27種類のテストで試したそうです。その結果、２つとして同じ結果になったブラウザは有りませんでした。実際、彼のテストの中ではiPhone のモバイルWebkitが100点 と Android の Webkitが 93点であることが示されています。実際、モバイルウェブサイトの開発を経験すると Android の モバイルWebkitが少し不自然であることに気づきます。

日本のキャリアの Androidをテストしてみた
PPKのテストは世界市場向けのブラウザをテストしています。DocomoのXperiaのように日本ではキャリアがAndroid 端末を日本向けに調整をおこなう場合があります。そこで自分でAndroid 2.x 端末にて10種類のAndroid端末のブラウザのテスト（http://fmbip.com/で ブラウザ判定のテスト）をおこないました。

事実①
iPhone4 のモバイルWebkitは Safari5として判定（正しくはモバイルWebkit）され
Android2.x のモバイルは全てWebkitは Safari4として判定されたこと。

事実②
Android の中で E-Mobile の HTC Aria が最も CSS3などのサポートがすぐれていたこと。

事実③
Android の中で Softbank の Dell Streak の CSS3とHTML5のサポートが非常に悪かったこと。同じ Android で何故、このように CSSのサポートの差異が発生するのか明確な理由がわかりません。

Webデザイナーとしてモバイルウェブの開発する時には、デスクトップのWebkitとモバイルWebkit が同じだと思ってはいけないでしょう。またデスクトップのWebkitでできたからといって、iPhoneとAndroid が同じ結果になると考えてもいけないでしょう。さらに、自分の案件では、「Softbank Dell Streak」 と Android 1.6の「Docomo Xperia」 はサポートの対称から外すことにしています。