AndroidでViewportのwidth指定が効かない!?

カテゴリー:HTML

お久しぶりでーす、MaMoTaKuです。
最近忙しすぎてブログ放置してましたが、やっと落ち着いてきたので
忙しい間にあった嫌な出来事を記事にして起きたと思います!
今日は、Android端末でViewportのwidth指定が効かずに
拡大表示されてしまう時の対処方法をメモ

現象

MaMoTaKuはViewportを指定するときによく

<meta name="viewport" content="width=640, user-scalable=no">

と指定するんですが、たまたまAndroid端末でMaMoTaKuが作ったサイトを確認したところ
拡大表示された状態で表示されてしまいました、、、org
どうやらwidthに数値を与えると表示がうまくいかない端末があるようですね、、、

そんじゃ解決策を

はい、結論から言うと

<meta name="viewport" content="width=640, user-scalable=no">
↓
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">

にするだけです、はい

わかりやすくすると
「target-densitydpi=device-dpi」
を足しただけですw

これだけでMaMoTaKuが持っている端末は治ったので、よしとしましょう
(効かない端末があったら切り捨てジャーw)

追伸 2015.10.13 14:20 訂正

上記で書いた内容、若干問題があったので訂正版を作りました!

<script>
var ua              = window.navigator.userAgent.toLowerCase();
var viewportContent = "width=640, user-scalable=no";
if (ua.indexOf("android") != -1 && ua.indexOf("mobile safari") != -1 && ua.indexOf("chrome") == -1) {
	viewportContent = "width=640, user-scalable=no, target-densitydpi=device-dpi";
}
document.write('<meta name="viewport" content="'+ viewportContent +'">');
</script>

Android端末以外で「target-densitydpi=device-dpi」を指定すると
警告やらエラーが出る場合があるので
「Android端末」かつ「標準ブラウザ」の条件の時のみ
target-densitydpi=device-dpi
を記述するように変更しました!

今度こそ大丈夫なはず