iPhoneでインプットフォームの入力が困難な現象、凄いズームするのを防ぐ方法！

モバイル閲覧時にインプットフォームを選択すると無駄にズームしてしまう現象を解消！

記事投稿後パソコンで表示具合を確認して大満足のワイ、iPhoneで最終確認するも謎の怪現象に遭遇し困惑！検索フォームを選択すると突然のズーム…横幅最適化崩れとるやん…(ιﾟωﾟ)ｴｪｪ…このままではモバイルファーストインデックスのビッグウェーブに乗り遅れてまう！乗るしかない…

というわけで原因究明から具体的な解決法までをご紹介。

具体的にどういう症状か

(本記事はiOS10.3.2時の情報です)

機嫌よくモバイルビューしてると検索の機能発見。お、こいつはPCでもモバイルでもそのまま同じように機能するやつなんやな！

(ιﾟωﾟ)！？入力状態が解除されてもズームされたままで横幅の最適化も崩れたまま…！？おいおいこのスマホ絶対王朝時代に随分とレジスタンシビリティ溢れるブログじゃねぇか……くそっこれは画面移動やりづらいぞ…勝手にズームしやがる…これは…

これはうざい。

これはなんとかせねば…

なんでこうなってんの

色々検索した結果以下の事が判明

• モバイルでもiPhoneだけらしい(iPhoneしか持ってないので他未確認)
• サーチバー以外でも入力フォームなら何でも発症する可能性がある
• 入力フォーム内のフォントサイズが16pt未満だと発症する

で、解決方法は

⇒入力フォームのフォントサイズを16ptに設定すると防げる

らしいです。そうかなるほど！入力フォームのフォントサイズを16ptにすればいいんだな！

で、どうやるんだそれ…

スタイルシートをいじればいいらしい

スタイルシートについてwiki

ふむ、フォントとか見た目に関するデザインのルールが色々記述されているファイルなわけだな。そしてWordPressなら今設定してある外観テーマを編集することでいけるらしい事も判明。

具体的な編集作業

1. ワードプレスの左メニュー「外観」⇒「テーマの編集」
2. 右側に　～.phpがズラズラ並んでてその中にstyle.cssがあるのでクリック！
3. 入力エリアに「input {font-size: 16px;}」と入力して「ファイル更新」押下！

～完～

(εﾟДﾟ)あ、まじでなおった…

いやー手順３がいきなり飛躍してますね。我ながら良く狙い通りにカスタマイズできたとびびる。”スタイルシート　インプット　フォントサイズ”とそれっぽい単語で見つけたそれっぽい命令文っぽいのをそれっぽい箇所にコピペしたら直ったっぽい恐ろしい処置方法。コピペ最強か。

入力箇所については、命令文の境目のような広く行間が空いてたところで何箇所か試してみたけど全部問題なく稼働したのを確認。とりあえず応急処置的に本件解消するだけなら割とどこでも良いっぽい、というcssの使い手が見たら卒倒するんじゃないか的な槍投げ感想。問題が解決しないで放置されるより良いよね…!!

とはいえ未知のモノに手を出す時の心得

さすがに突然適当に命令文いじってバグって復旧不可能になりました！とかはヤバイんで、ちょっと調べてみました。で、cssファイルはどうやら単純にテキストファイルみたいなもんなんで、元のテキストをまるごとメモ帳やらExcelやらにバックアップ取っておけば直ぐコピペ復旧できるくさい。コピペ最強か。そうとわかればいくらでも弄ってやるぜイヤホゥ!!!

後はどこを加工したのか分かるようにしておくと良い気がする。本来の然るべき入力位置が理解できたら書き直したいし。今回適当に弄ったものが今後どこにどう影響してくるかわからんしなー。で、どうやら「/*」と「*/」で挟んだ文字がコメントアウト機能でメモとして残せる模様。命令文と一緒に「/* 入力フォントサイズ16にしたやつやで */」って入れときました。全部半角英数で記述されているのでこのメモならどこ弄ったか一目瞭然！(*//)ｷｬ

まとめ

• iOSさん中途半端なズーム機能お断りやで
• CSSでインプットフォントサイズを16ptにしてあげよう
• 自信がないコンテンツを加工するときは念の為バックアップを取ろう

今回の件に限らず動作検証は、PCとモバイルの両方でしっかり確認してかないといけないみたいですね。ブログのボリュームが少ないうちに色々粗探ししなければ…というかスタイルシート少し勉強したほうがよさそうですね(ιﾟωﾟ)

(´ー` )ﾉｼ