くりすたる・の〜と

とりあえずメモとかしてみた。

Android標準ブラウザで『自動調整機能』が効かない謎。

2016.03.21(2016.03.09)

ある日、自分のページをAndroid標準ブラウザで見てみると表示がおかしなことになっていたのです。どちらかというとブラウザの挙動のバグな気もするのですが、実は、簡単なタグを入れるだけで回避することができるのです、という話なのです。

Android標準ブラウザ『自動調整機能』とは

Androidの標準ブラウザでは、横幅が広すぎるページを表示したときに、文字の部分だけ画面の幅に合わせて表示してくれる機能があります。i-mode等のケータイなんかでもある機能で、レイアウトが崩れる代わりに、文章を読む際には横スクロールする必要がなくなる為、携帯の小さな画面でも読みやすくなるメリットがあるのです。

レイアウトが崩れてしまうのはページ制作者側からすればバグとも捉えられるのですが、ページが読みやすくなる機能と考えれば、それはそれでありだと思っていたのです。

ところが、先日このページをリニューアルした際、この機能が効かなくなってしまったのです。結果、『レイアウトに合わせて縮小されたものすごく小さな文字を読む』か、『いちいち横スクロールして文章を読まなければならない』という、著しく可読性に欠けるページになってしまったのです。

(そもそも、非力な端末においてはスタイルシートを切って、論理構造だけを表現したテキストを表示するのが一番すっきりして読みやすいという考え方もあるのですが、それはとりあえずおいておくのです。)

『自動調整機能』が効かなくなる原因。

で、いろいろ調べていくうちに、どうも<p>タグの場合は自動調整無効になっていて、<li>タグの場合は有効になっている、という事に気づいたのです。いったい何の差が原因なんだろう?marginとかをpxで指定したから?等といろいろ考えたり調べたりしているうちに、原因がわかったのです。その原因とは、な・ん・と、

その要素に「背景色」「背景画像」を指定していると、Android標準ブラウザの「自動調整機能」は無効化される(!)

...という事らしいのです(!)。って...なんじゃそれっ!

...確かに、リニューアル後、背景画像を透過させない為に<p>タグには『background: #ffffff;』を指定しました。で、<li>タグは、その親の<ul>タグに指定しているので、<li>タグそのものには指定していない...。辻褄もあっているのですよ。

理由はわかったけど、解決はしてない(笑)。

こんなわけわからな現象は、CSS混迷期のNN4以来なのです(NN4に比べれば可愛いものですが)。対策はしようと思えばできそうですが、あまりにめんどくさいので諦めたのです。

ちなみに、この問題はAndroid標準ブラウザだけの問題で、Chromeではページ全体を画面にあわせてレンダリングして、文字サイズだけ大きくして読みやすさを確保する、という手法をとっているようです。まぁ、ChromeはChromeで、場所によって文字のサイズが違ったりとか、よく分からない部分もある(*)のですが、もはやそういうもんだと諦めることにしています。やはり、一つのHTML+CSSですべての大きさの画面で、レイアウトを維持しつつ『読みやすい』様に対応するのには限界があるのかもしれません(笑)。←でも、FireFoxとかIE11の画面幅を変えた時はそれなりに巧くいくんだよなぁ...。

(*)仮想的に320px幅でレンダリングしているあたりに原因がありそうな気もするのですが、ここら辺に関してはよくわかってないのです。

...と思ったら、なんとなく解決したかも?(笑)。

Googleさんのページに、こんな理由が書いてあったのです。

meta viewport 要素を指定しない場合は、モバイル ブラウザのデフォルトであるパソコン画面の幅(デバイスによって異なりますが通常はおよそ 980 ピクセル)でページがレンダリングされます。
(レスポンシブ ウェブ デザイン(ウェブマスター向けモバイルガイド(google))より引用)

...なるほど。小さくなる理由がわかった気がします(笑)。で、

<meta name="viewport" content="width=device-width, initial-scale=1.0">

googleさんのページに書いてあったこのタグをHEADタグ内に書いたら、標準ブラウザ・Android版firefoxでは、なんとなく解決しました(他のブラウザは試してないのです^^;)。PCでFireFoxとかIE11の画面幅を変えた時と同じような感じになってくれます。ただ、これ、意味をよく分かってないんで、そこがちょっと怖いんですよね。

ってか、この方法、自分のページは解決するけど、他のページを見た時の問題はやっぱり解決してないのです。これ、ブラウザ側でレンダリング法を選べればいいのに、とか思ってしまったのです^^;。



くりすたる・の〜と