スマートフォンなどに対応したレスポンシブデザインに関するCSSスタイル（font size自動調整をきるなど）
前にも一度、同じような問題に直面して調べて解決したような気がしたのですが、今回もおそらくその時と同じくGoogleで調べて解決したので、メモって忘れないようにしておこう。
font size自動調整をきる
最近ではレスポンシブデザインでいろんなデバイスに対応したりしますが、私もそんな感じの仕事をしていたわけです。最初はPC Chromeでwindowを伸び縮みさせながら作っていたわけですが、ある程度できた所でiPhone Mobile Safariでチェックしていたのです。Portrait mode（縦向き）では問題なく閲覧していたのですが、Landscape mode（横向き）にしたときにどうも文字サイズが変になります。
最近はiPhoneもリモートでWeb inspectorで見れたりしますから、細かく調べてみても数値的には問題無さそう。おかしいなってことで調べた後に、iPhoneでは自動文字サイズ調整があるってことに気づいて切りましたよ、というお話です。
具体的にはこのスタイルを加えただけです。
body { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -o-text-size-adjust: 100%; text-size-adjust: 100%; }
当初 "none" にしていましたが、
id:nitoyonさんの助言により "100%" にしました！
少し関係ないですが、私は合わせてmeta要素でviewportの指定をしています。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
image-renderingで伸縮画像描画をsolidにする
こちらは少し特殊なケースかもしれませんが、念のため書いておきます。
今回のやつはレスポンシブデザインにリキッドデザインも組み合わせたりしていろんな画面サイズに合うように考えたりしてます。場合によってはコンテンツに使われている画像もサイズが伸縮したりするようにしています。で、その画像が白黒の２値画像だったりするのです。例えばこんな画像です。
この画像に限らないとは思いますが、画像が伸縮するとブラウザ側で適度に良い感じに描画されて、場合によってはエッジがモワッとした感じにレンダリングされたりしますよね。普通の写真などの場合にはそれほど気にならないかもしれませんが、２値画像だと伸縮時のモワッと感が際立つわけですね。もっとパリっと表示させたいのです。
その場合は以下のスタイルを使用すれば解決出来ます。しかし、このスタイルに対応しているのはまだ少しで、最新のSafari、Mobile Safari、 Firefox辺りだと思います（他はあまり調べてません）。
img.crisp-edges { image-rendering:optimizeSpeed; // Legal fallback image-rendering:-moz-crisp-edges; // Firefox image-rendering:-o-crisp-edges; // Opera image-rendering:-webkit-optimize-contrast; // Chrome, Safari image-rendering:crisp-edges; // CSS3 Proposed -ms-interpolation-mode:bicubic; // IE8+ }
↓ちなみにstyleを当てたイメージを貼っておきます。
