Androidの標準ブラウザ、widthのバグ?

Androidには標準ブラウザがある。
その名も「ブラウザ」。

android_browser

スマホ操作をレクチャーしてもらったときには、二度聞きしてしまった。名前からしてふざけているというか、やる気のない感じがします…個人的に(笑

通常はChrome使いなものの、サイト制作時にこの「ブラウザ」でも確認しているんですが、IE以上のヤバイ子ちゃんッぽい。

文字要素の幅がおかしなことに

ハマったのが、文字のレイアウト崩れ。
スマホを縦から横に切り替えたときの動作を確認していたら、コンテンツ内容(たぶんP要素)が指定の幅に広がらず、狭まってしまう。他ブラウザでは何の問題もないし、CSSやHTMLなどプログラムソースにおかしなところはない…なぜ…??

ググッたらどうやらAndroid4系のバグで、widthが効いていないらしい。

widthを効かせたい要素にbackground-colorを指定させると回避できるみたいなので、CSSに記述したらなおった・・・。
背景色なしの指定(background-color: none;)でも効いた。
※拡大縮小が可能な場合はダメなよう

その他にも、スワイプ操作やリンク部分の動作もChromeなどと比べて動きが変なとこが多々ある。

反応が鈍いというか、何回もタップしないと動作しなかったり…イ、イライラするーーー!!!

サイトのアクセスを見ているとAndroidユーザーはChromeが圧倒的に多いものの、この「ブラウザ」でアクセスするユーザーもいるため無視するわけにもいかない。

今後もいろいろ、バグに悩まされそう…。

■6/12追記
なおった!と思ったけど厳密にはなおってませんでした。
viewport設定でユーザーに対し、拡大縮小を許可※している場合、ダブルタップで拡大すると結局widthが効いていないような状態になってしまう・・・。
拡大縮小させければ大丈夫なようだ。(user-scalable=no)

※minimum-scale=0,maximum-scale=1.5指定の環境下で確認。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です