#5 ポケモンタイプ別検索アプリを作る　スマホ対応編【ぴよぴよコーダーの開発日記】

em

さて、スマホ対応編です。Google dev toolのエミュレータではこんな感じですが、

画像1

実機で見たらひどかった。iPhone iOS13

画像2

まずiPhone。なんでデフォルトが明朝体か！。ゴシックに直します。

参照：iOS 11のSafariで、ウェブページが明朝体フォントで表示されてしまうのを直す。

body {
 font-family: sans-serif;
}

サンセリフにするだけ、よく「ヒラギノ角ゴシック」など記載しているコードが多いけれど、iOS上の日本語サンセリフフォントは「ヒラギノ角ゴシック」だけなので、いちいち書く意味はないとのこと。そりゃそうですね。

動作確認したら、さらにiOSのバグっぽいものが！。iOSでは、入力フォームのfont-sizeが16px以下だったら（今回はfont-size指定してなかったのですが）、見やすいように勝手に調整してズームしてくれる仕様となっている。とのことで。。よかれと思った仕様なんでしょうが、ズームされた画面をいちいちピンチインして戻すの大変なので、これも直します。

参考：スマホの入力フォームが勝手にズームしちゃう？

input{
    font-size:1.0rem; //16pxでも大丈夫
}

もちろんhtml{ font-size:62.5% }の時は、1.6remにしても大丈夫です。

あとは、ボタンやテキストボックスが、めっちゃ角丸なのを直す。これもiphone Safariのお節介機能なので、下記のコード「-webkit-appearance : none;」でデフォルトスタイルを打ち消す。

input,
button {
 border: 1px solid #666;
 border-radius: 4px;
 -webkit-appearance : none;
}

参考：iphoneやipadでフォームのテキスト欄やボタンのデザインにCSSが効かない

画像3

だいぶマシになりました。

【教訓】：実機検証は、絶対やりましょう！ iPhone Safariはクセが強い！

デモ：jQuery版（【使い方】炎とかフェアリーなどの文字列を入力ボックスに入れて「しらべる」をクリックすると結果が表示されます）

いいなと思ったら応援しよう！