2015年11月02日

【サイトのスマホ対応】target-densitydpi=device-dpiはやめとこう

Android4.1の標準ブラウザとchromeで、どうも表示文字サイズなどにかなり違いが出てしまう。
標準ブラウザだと文字が小さい。つまり大きな画面を表示しているようだ。
その両方で
alert(window.innerWidth);
とすると、違う数値を返してくる。
My端末の横幅は480で
標準ブラウザでは「479」を返してくるが、
chromeは「328」!
へえー。。。。
へえー。。。。。。。。。
どうりで違う文字サイズ(見た目)になるはずだわね。
あらためて試験すると↓こうなった。
20151101_095937.png 20151101_100011.png
こりゃたいへん。
だが、標準ブラウザとchromeでさほどの違いなく表示されるページはごまんとある。
ウチだけなんでなんで? とあちこちつついてみると、
viewportの設定に問題? 原因があった。
上記htmlのviewportは、
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, maximum-scale=1.0, user-scalable=yes">
だったが、このうち原因となっていたのは、
target-densitydpi=device-dpi
の部分だった。これを設定していると、標準ブラウザが480ベースを守ろうとする。chromeは守らない
ということがわかった。この記述をはずしてやると上記スクリプトの返りは
標準ブラウザ:320
chrome:328
となりかなーり近づく。当然文字サイズなどもほぼ同じサイズで表示されるようになった。大きなデザイン上の相違もなくなった。
chromeはシェア率も高く、こちらの表示を妥協するわけにはいかなかったので標準ブラウザの動きをそれに近づけることができて、まずはよかった。。。かな。
でもそもそもはchrome(など)の挙動が変なんじゃないのか??
これ(target-densitydpi=device-dpi)を入れ知恵したやつ、あるいはchromeの挙動そのもの、なんかいろいろ納得いかない、いつもの奇妙な世の中だが、ここはいつもの忍耐、
「target-densitydpi=device-dpiはやめとこう」(唱和願います)
ということにして生きていこう。

(参照)
ブラウザバックによる表示乱れはtarget-densitydpi=device-dpiによる、と書いてある。
http://www.flexfirm.jp/blog/article/354
http://77monmon.tumblr.com/post/52267329454/target-densitydpi-device-dpi
むしろ「target-densitydpi=medium-dpi」を入れておくべき、とも。
https://twitter.com/moriokumura/status/342782598608740352
https://twitter.com/Evolutor_web/status/630555780366757888

誤った記事はこれ↓↓
PC向けサイトがスマホでも崩れないようにする方法
私怨。スマホ対応しようとしてググるとかなり前の方にヒットしてしまうので、被害者は少なくないはず。古い記事とはいえ、訂正なり削除なりして欲しい。


posted by シマウマ at 12:04| Comment(0) | html-css | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。