レスポンシブサイトで遭遇するフォントサイズのバグまとめ

remを使っている時、chromeでだけフォントサイズがおかしい

bodyに対してだけem指定する。

body {
  font-size: 1.6em;
}

もしくはjs

$(function(){
    //chrome用の分岐処理
    var _ua = (function(){
     return {
        Blink:window.chrome
     }
    })();
     
    if(_ua.Blink){
        //chromeの文字サイズ対策
        document.body.style.webkitTransform = "scale(1)";
    }
});

参考サイト様

http://qiita.com/qtach1/items/2a48aa64dbcd820b7d76

textareaのフォントサイズがchromeでだけおかしい

フォントファミリーを指定してあげると治るようです。

textarea{
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

参考サイト様

http://qiita.com/qtach1/items/c28df7c65ccf8cc35540

Android4系でpタグが変な位置で折り返される

pタグに背景色か背景画像を指定してあげる。

p{
	background-image: url(../img/s.gif);
}

参考サイト様

http://count0.org/2013/10/03/android-viewport-width-trap.html

Androidのchromeで文字サイズが大きくなる

こちらのように、viewportが固定の時に生じる現象らしい

<meta name="viewport" content="width=760" />

該当する要素に

.section1 p{ max-height: 100%; }

などとしてあげると治る。
ただしリセットcssなどに書いておいても効かなかったので注意が必要！

参考サイト様

http://www.seomode.jp/html-css/2014/06/25/3339/

iOSで文字サイズが変になる

* { -webkit-text-size-adjust: 100%; }

参考サイト様

http://ultimate-ez.com/2014/03/29/3572/