Androidデフォルトブラウザとスマホサイト

まずは本題から

現在主流のAndroid 4系のデフォルトブラウザ（地球儀ロゴのやつ、Opera系）では『ページの自動調整』とかいうコーダー泣かせな無駄機能が付いています。

以前のAndroidにもあって元々はスマホで見やすく表示する為の機能らしいのですが、何故か4系ではBackgroundに画像を設定しておかないと要素内のテキストが勝手に改行されて左端に寄る。

端末側の設定を変えれば直るんですけど・・・。

（メニュー→設定→高度な設定→ページ自動調整のチェックボックスを外す）

なにせデフォルトでONになっているのでたまたまAndroid端末のデフォルトブラウザでサイトを訪れた人には見難くなってしまいます。

そこで製作側で対応する方法としては1px ×　1pxの透過度100%のpng画像を背景に設定する事で回避できるらしい。

私はスマホの気の遠くなるようなクロスデバイス＆ブラウザに特別クライアントの要望がない限り普段はやらないので知識としては知っておくべきかなと。

ちなみにGoogleの出してるAndroid版Chromeではこういった事は起こらないんですけどね。

クロスデバイスについて

ここからはウェブサイトをモバイル対応させるうえでクロスデバイスっていうのはどこまで意識するべきかという点に関して個人的な意見。

一応手元にはAndroid端末（3.x & 4.x）、Windows8 Phone、iOS端末があるので最低限のチェックはしています。

しかしOSは同じでも解像度が違ったりすると表示もまた変わってくる･･･。

見ているブラウザでも違うし正直こんなのいちいち対応してたらきりが無い。

例えば手元にあるAndroid 4系 Icecream Sandwichの端末SH02-E（AQUOS PHONE）、IGZO搭載モニターで今年初めにシャープに限らず日本のメーカー久々のヒットと言われたこの端末ですが、これの解像度がまた無駄に高い。

only screen and (max-device-width:980px)に設定しても横向きに表示すると1280px(300ppi)あるのでPC表示になってしまうんです。

1280pxといえばネットブックよりデカイのでMedia Queriesで1280px以下に設定してしまうとネットブック、下手したら17インチのノートでもスマホ表示になってしまう。

デバイスピクセル比の調節までしっかりやるか、サーバーサイドで振り分けてやればこの辺の問題はパスできるんですけど最近は中途半端なサイズのスマホだかタブレットだか分からんような端末まで沢山あるのでわざわざ特定のデバイスの為にそんなところに時間を割くのも難です。

なので基本的にはiOSと一般的なAndroid端末で普通に表示されればそれで良いかなっていうのが自分のボーダーライン。

あとはクライアントの要望にこたえる形で微調整をしていく感じ。

ひとこと

Googleが脱Webkitして本格的にブラウザ開発に乗り出す方針を固めたみたいなのでAndroidのデフォルトブラウザも良い物になるといいな。

※この記事は旧ブログで作成した記事を再編集・掲載したものになります。