アンドロイドのchromeで表示が崩れる。viewportの設定ミスが原因

 アンドロイドスマートフォンにデフォルトで搭載されているブラウザ(chrome 42.*)ページを表示すると、画像やテキストの表示がおかしくなる現象がありました。他のブラウザ、古いアンドロイド(chrome)は問題はありませんでした。この表示エラーは、画面をスクロールしたとき、画像やテキストが歪んだり、消えたりして、元に戻らなくなります。(下の画像参照)

 この現象は、htmlのmetaタグに使用しているviewportの設定不備が原因でした。具体的には「width=device-width、initial-scale=1」と「minimum-scale、maximum-scale」を同時に設定している起きる場合があります。特にバックヒストリーで前のページに戻ったとき、画像がたくさんあるページに起こる可能性が大きかったです。アンドロイド用のエミュレータで確認しても表示に問題はありませんでした。実機だけに起きる現象みたいです。 
修正するには、メタタグの「viewport」を下記の「正常な設定」にしてください。

表示がズレたページのスクリーンショット
viewportの設定ミスで、画像が反転し、歪んで表示した

エラー時の設定
< meta name=”viewport” content=”width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”/>

正常な設定
< meta name=”viewport” content=”width=device-width, initial-scale=1,user-scalable=no”/>

viewportの設定を上記のように変更することで正常に表示することができました。

viewportの設定について
HTML5/ページ全般/meta要素 表示領域を設定する - TAG index Webサイト

(愚痴 
確認用の実機がなかったので、原因判別に時間がかかりました。結局、実機をもっている方にお借りして修正しました。

カテゴリー: Html&CSS, ホームページ作成 パーマリンク

コメントを残す