５丁目通信（仮称）

お客さんからページの右上にある検索ボタンがとんでもないところに表示するという相談が来た。この部分は他の会社が作った部分だけど、対応が安い早いと重宝されている自分のところに回ってきた。

検索入力項目と検索ボタンが横に並んでいるはずだけど、検索ボタンが入力項目の下に送られて表示されてしまうらしい。

どうも、特定のPCで発生するとのこと。自分のところのPCでChrome, Firefox, Edge, それと忘れていけないInternet Explorer（忘れたいけど・・・）で試してみたけど、すべて正常に検索ボタンが配置している。スマートフォンも試してみたけど、唯一おかしな動作をしたのはiPhoneのSafariだった。

とりあえず検索入力項目の幅を小さくしてみると、正常にiPhoneでも表示するようになった。だけど、これだとPCでは検索ボタンの横が空いてしまう。

そこで、iPhoneのCSSでどのような状態になっているかを調べるため、iPhoneの実機でデバッグできるようにする。参考にしたのは以下のサイトである。意外に簡単にiPhoneのSafariページをMacのSafariの開発ツールから見ることができた。

Qookie Tech

 

2 Users

8 Pockets

実機のiPhone Safariで発生した表示バグをMacに接続して検証する

https://tech.qookie.jp/posts/developer-tool-iphone-mac-connect/

バグを回避してきた経験とAutoprefixerのおかげで、制作したレスポンシブウェブデザインが崩れることはほぼ無くなった。それでも、まれに「実機で見たときだけおかしい」現象が発生する。 今回は、実機のiPhone Safariでだけバグが起きている時にMacと接続し検証する方法を共有したい。 事前設定iPhone側の設定設定アプリの Safari > 詳細 > Webインスペクタ

MacとiPhoneをつなげて調べてみると、入力項目のpaddingの初期値が設定していないのが原因だった。iPhoneの場合、何もpaddingを設定しないと0.5emが初期値になってしまう。ちなみに、初期値は以下の通りになる。

どうも最初に作った人は、検索フォーム幅、入力項目幅を固定にして、marginやフォントサイズとかすべてのものをピクセル単位で指定していたけど、paddingだけを指定し忘れたのが原因だった。そもそも、CSSのリセットをしていなかったのが敗因だった。

特定のPCでどうして発生するかは、その実機を見に行けば原因解明は速いかもしれない。こちれは不明？　古いバージョンのブラウザがインストールされているから？

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

SBクリエイティブ

¥10 （2024/11/20 15:28時点 | Amazon調べ）

Amazon

ポチップ

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

著:谷 拓樹

¥1,881 （2024/11/20 15:28時点 | Amazon調べ）

Amazon

ポチップ

HTML&CSSポケットリファレンス　［改訂3版］

技術評論社

¥1,980 （2024/11/20 15:28時点 | Amazon調べ）

Amazon

ポチップ