PCサイトをAndroidで表示するという要件があった。
普通に考えなしでコーディングしていたらAndroidで意図しないところで改行されてしまう問題が起きたので、解決策のメモになります。
対象デバイス
- Android 4系全般
- pタグなどのテキスト要素
対策01
- スペーサー的な画像をbackgroundに差し込む
- （display:tableなどを使っていた場合は効かない）
p{
background: url(../images/spacer.gif) no-repeat;
}
対策02
- JSのユーザエージェントで、viewportをかましての対処
(function(){
var agent = navigator.userAgent;
if (agent.search(/Android 4/) !== -1) {//Android4系のみ。下位バージョンで効くとバグが起きる
$("head").append($('<meta name="viewport" content="width=device-width,user-scalable=yes,target-densitydpi=device-dpi,initial-scale='+(screen.width/＊＊＊)+'">'));
//＊＊＊のところは、コンテンツのサイズを入れる
}
});