Androidのエミュレータで確認した際に妙な状況に遭遇。原因と対策の調査でえらく時間を喰いました…。
根本的な解決策は不明ですが、ぜんぜんValidじゃない回避策が見つかりましたので記事にします。なお、実機未検証ですので、そもそも実機でこの問題が起きているかどうかからあやふやです。
この点、ご留意くださいませ。
[2015.2.1追記]—
viewportが原因かもしれない件を記事末尾に追記
—
[2014.4.3追記]—
とある方から解決方法の１つを教えていただけましたので追記します。
詳細は下にある「透過gifを使う」の項目をご覧下さい。
—
[2013.10.30追記]—
この件は何度かTwitterにて「これはダメな方法では」と指摘されていまして、私自身も上記冒頭に上げているようにダメな方法だと思っています。しかしながら、とある方にご協力いただいて解決法を探っていただいたこともありますが、未だ答えが見つからず。
もしも、正解をご存知の方がいらっしゃいましたら、情報をいただきたいと思います。
—
Androidのブラウザで要素の幅が狭まる
まずは見ていただいた方が分かりやすいので、画像をご覧下さい。
Androidのエミュレータでみると、本来なら空白は無いはずですがオレンジの部分のような空白が発生しています。
私の状況では、pタグで囲ったテキスト要素にこの問題が発生しました。見出しであるh1やh2は特に影響を受けていない模様です。
モバイルだけにcssを適用することはもちろんありますが、p要素にはこんな表示になるようなwidthもpaddingもmarginも設定しておらず、制作したcssの問題ではなさそうでした。
テキストの横にfloatさせたimg要素もありませんし、何かしらのプログラムで要素を生成していることもありません。
なお、iPhoneやPCでのブラウジング（ブラウザ問わず）は意図どうりの表示で、妙な折り返しも空間も存在していません。
加えて、このエミュレータでは4.0と4.2でこの症状が確認できました。
[2014.4.3追記]透過gifを使う対応策
情報をいただきまして、「ああ、なるほど」となりましたので追記です。
下記のように1pxの透過gifを背景画像に設定します。もちろん画像の名称は何でもOK。
p {background-image:url(1px-transparent.gif);}
なんといいますか、こういう基本的なことに気づかなかったのが悔しいといいますかなんといいますか。
ともかく、背景に画像が使えない場合でも、おかしな指定をせずに解決が可能ということです。
対応策
※上記の追記前の内容であり、上記がある以上お勧めできない方法です。
調査の経過などは後回しにしまして、先に対応策を。
cssで該当のp要素に以下の設定を行えば表示がなおりました。
p {background-image:url(image);}
urlの中にimageと記述していますが、ここは何を書いても可能なようです。ただし、何も書かないとp要素の背景が黒になります。
冒頭に書きましたが、実機未検証です。しかも、ご覧のとおりまったくvalidではない力技です。画像の参照先が全く存在しない部分を指していますから…。
問題の原因は？
根本的な原因は分かりません。バグとしか言いようがないといいますか。しかし、こうなる切っ掛けや要因はあります。詳細は下記のサイトさんをごらんくださいませ。私よりもしっかりと見ておられますので…。
概要だけ書きますと、Androidの機能である「ページの自動調整」の効果が原因の模様です。対応策は、この機能を切るか背景画像又は背景色を設定するか。
実際、ソースをいじくり回している時に背景色の設定で空白が消えたことを確認していました。ちなみに、テキストの幅などに関係しそうな「word-break」「word-wrap」「white-space」「word-spacing」「letter-spacing」「text-justify」や、基本的な「width」「padding」「margin」、他に「bordr」「display」も効果無しでした。
背景色を設定できない場合は？
背景色を設定しても良いならば、背景色の設定がもっとも簡単ですが、このブログのように背景色が使えないデザインだとお手上げです。
ある程度cssで試した際に、効果があったのが「background-color」「background-image」の2つ。そこで「background-image」を使うことで「ページの自動調整」の効果を消せればと思い試して成功した次第です。
残念ながら、背景色の設定で「#00000000」のように存在しない値を入れたり「transparent」を設定しましたがダメでした。
症状が出ていないサイトもある
調査に使用したエミュレータで見た際に、崩れていないサイトさんもみかけました。
しかし、ソースを拝見しても背景画像や背景色を使用しておらず、特別な記述が見当たりませんでした。少なくとも、該当部位へのcss記述追加ではないはずです。
根本的な構造の問題もあるのかもしれません。特定の作り方を回避すれば発症しない可能性はありますから、もっと最適な修正方法があるのでしょう。
結び
正直諦めるしかないかなと思っていたのですが、無理矢理な方法が効いたようで、とりあえず対応策が形になりました。
しかしながら無理矢理である点は間違いないので、嬉々として進められる方法ではありません。使わないで良いのであれば、使わない方が良いですし。
Androidで見た際に、「テキストが短く折り返されされている」「pタグの幅がおかしい」「意味不明の空白がある」などの症状の場合にどうしてもとなりましたらお試しくださいませ。
使用したエミュレータ
今回の調査には「Android SDK Manager」「Android Virtual Device Manager」を利用しました。
使わせていただいて文句をいうのも失礼なのですが、重い上にクラッシュしやすく大変でした。サブディスプレイにエミュレータの画面を移動するだけでクラッシュしますし、一度クラッシュするとそのプロファイルが削除できないという有様。
ただ単に表示させるだけでえらく時間がかかりました…。とはいえないと確認さえできないので、今後も仲良くしたいところです。
追記
この記事へのリファラから辿ってしったのですが、自動調整がおかしな具合に働く原因はviewportがないことにあるのかもしれません。詳しくは以下の記事をどうぞ。
viewportをdevice-widthにしてそうなシングルカラムのサイトで空白が発生しているケースは見た覚えがなかったので（調査数はかなり少ないですが）、viewportがないことが問題であるなら納得できる部分はあります。
なお、2つ目の記事では1pxの透過gifを用意するのではなく、Data URIを使う方法も紹介されています。
追記2
以下のような状況を4.2実機で確認。
- 概要文のある記事一覧を閲覧
- 個別のページに移動
- 記事一覧に戻る
- 概要文の右に余白発生
- 1〜3を何回か繰り返す
- 記事一覧の概要文にでてきた右の余白が消える
特定の構造に起因する部分もあるのかなとは思いますが、ページ推移だけで発生したり消えたりというのははじめて確認しました。
ページの自動調整機能に対しては、不安定すぎて呆れ気味です。
0人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
