読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【iPhone(iOS Safari)の独自仕様】

コーディングテクニック

拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする – wevdev

iPhoneiOS Safari)では、フォントサイズが実質16pxより小さい
フォームにフォーカスを当てた時に、自動的に画面が拡大するという
独自仕様があります。

「文字が小さいと入力し辛いでしょう?
 だから拡大してあげますね。」

という配慮なのでしょうけれど、
フォーカスを戻しても拡大前の状態に戻らないという困った仕様です。

OSによってブラウザの挙動が異なるのは仕方がないことですが、
ウェブ制作者としては迷惑なことが多いです。
 
特定のOSやブラウザだけのために、
作り方を別にしないといけないからです。
 
スマホのカメラとか概観とか、
そういうところで独自性を発揮するのは存分にやってもらいたいです。
 
でも、ブラウジングの仕様は統一して欲しい。
シェアの大きいデバイスほど、「右へ倣え」をして欲しいと思います。

解決方法

一番簡単なのは、入力フォームのフォントサイズをCSSを使って
一律16px(または16px以上のサイズ)に強制することです。

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
    font-size: 16px;
}

もちろん、関係ない場所に影響を及ぼさないために、
必要に応じて複合セレクタを使いましょう。

例)formタグの内側にある入力欄のみ16pxにする
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="number"],
form textarea {
    font-size: 16px;
}


↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓

【1】CODEMYマンツーマンレッスン

codemy-lesson.office-ing.net
⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン

▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
 

【2】プログラミング講座CODEMY

office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

講師が執筆した本が発売されました!

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら!