iPhoneのSafariでフォントサイズが勝手に変わる際の対処法

iOSはおせっかいで余計なことを自動でやってくれちゃうので
スタイル指定を無視してフォントサイズを自動調整してくれちゃいます。

この自動調整を無効化する -webkit-text-size-adjust というプロパティがあるので
以下のように body などに記述しておくと良いと思います。

参考
iPhoneでフォントサイズが勝手に変わっちゃう時の解決方法 | YOUSORO.blog
-webkit-text-size-adjust: none を絶対に設定してはいけない理由 - てっく煮ブログ

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

郵便番号フィールドにinput[type="number"]を使ってはいけない

スマホサイトを制作したのだがフォームにフォーカスを当てた際に出るキーボードを
数字キーボードにしたいという要望があったので
input[type="number"] や input[type="tel"] を使えば良いと聞いていた俺は
それぞれ郵便番号と電話番号のフィールドの type を text から変更したのだけど
input[type="number"] には罠があったので共有します。
input[type="number"] というよりは iOS の Safari にある罠です。

iOS の Safari は input[type="number"] のフィールドで入力値がゼロ始まりの数値の場合、頭のゼロを自動で除去する

この仕様…あのおせっかいな Excel を思い出す仕様だぜ…ｷﾞﾘｯ…

例えば皇居の郵便番号 100-0001 は分割された郵便番号フォームの後ろの部分が以下のように頭ゼロになります。
-
表示上は iOS でも全く問題ないのだけれど POST するタイミングで iOS の Safari は 0001 を 1 に変換します。
ベーシックなバリデーションで郵便番号 7 桁とか判定して 7 桁入力してくださいとかエラー出すと
ユーザーは 7 桁入力したのにとなるので確実にクレームものです。
iPhone を普段使いしていない僕は完全に油断してやられました。
iOS のみで起こり、input[type="number"] でゼロ始まりの数値を POST した時にようやく分かるバグです。
全く油断もすきもありません。

とりあえず対処として input[type="text"] に戻しました。
input[type="tel"] に変えるのも一瞬考えましたが
電話番号でないフィールドに input[type="tel"] を適用するのも
またろくでもないことになりそうだったのでやめておきました。

クロスブラウザ対応！jQueryのアニメーションスクロール

追記: 2013/03/24

jQuery.browser が jQuery v1.9 で廃止されたので対応版の記事を書きました。
jQuery1.9以上対応版クロスブラウザ対応アニメーションスクロール | DevAchieve

元の本文はココから

OS	Browser	Version
Windows	Internet Explorer	9
Windows	Google Chrome	22
Windows	Mozilla Firefox	14
Windows	Opera	12
Mac	Safari	6
Mac	Google Chrome	21
Mac	Mozilla Firefox	14

スムーズなスクロールを行うには
jQueryを使うのが一番楽でしょう。
地味にブラウザ毎に動きが異なったので
実際に右のブラウザでテストしてみました。
jQuery アニメーションスクロールサンプルページへ

function animatedScroll(selector, speed, animation, complete) {
    $($.browser.msie || $.browser.mozilla || $.browser.opera ? 'html' : 'body')
        .animate(
            {scrollTop: $(selector).offset().top},
            speed,
            animation,
            complete
        );
}

スクロールはブラウザ毎に少し異なっていて$.browserで判別している。
jQuery 1.3で廃止予定でプラグインでサポートされるようになるかもとか書かれているので
$.browserについての情報収集は欠かさないようにしといたほうがいいかもしれない。
IE, Firefox, Operaはhtmlでスクロールするが、Chrome, Safariはbodyでスクロールする。

変数	渡せる値	デフォルト値 (nullを渡した時)	説明
selector	jQueryの要素取得の記法	なし(動かない)	関数内で要素の取得を行なっている。
speed	slow | fast | 任意の数値 | null	400ms	slow: 600ms, fast: 200ms
animation	linear | swing | null	linear	linearは等速、swingは加速して減速する。
complete	(function) | null	なし(何も行わない)	スクロール完了のコールバック関数。

<input type="button" class="btn btn-primary" value="Slow Linear Scroll" onclick="animatedScroll('#invite', 'slow', 'linear', onScrolled)" />
<input type="button" class="btn btn-info" value="Fast Linear Scroll" onclick="animatedScroll('#invite', 'fast', 'linear', onScrolled)" />
<input type="button" class="btn btn-success" value="3000ms Linear Scroll" onclick="animatedScroll('#invite', 3000, 'linear', onScrolled)" />
<input type="button" class="btn btn-warning" value="Slow Swing Scroll" onclick="animatedScroll('#invite', 'slow', 'swing', onScrolled)" />
<input type="button" class="btn btn-danger" value="Fast Swing Scroll" onclick="animatedScroll('#invite', 'fast', 'swing', onScrolled)" />
<input type="button" class="btn btn-inverse" value="3000ms Swing Scroll" onclick="animatedScroll('#invite', 3000, 'swing', onScrolled)" />
<script><!--
    var onScrolled = function onScrolled(){
        if(!confirm('お分かりいただけただろうか？')){
            animatedScroll('body', 'fast', 'swing', null);
        }
    };
    function animatedScroll(selector, speed, animation, complete) {
        $($.browser.msie || $.browser.mozilla || $.browser.opera ? 'html' : 'body').animate({scrollTop: $(selector).offset().top}, speed, animation, complete);
    }
--></script>

関連
jQuery.browser – jQuery API
.animate() – jQuery API
.offset() – jQuery API