Androidスマホでコメント欄などへの文字入力時に起きる不具合の対処方法

先におことわりしておきたいのですが、原因が不明すぎるので、これはあくまでも応急処置としての対処方法です。

ブログ内を検索できる「検索エンジン」なるものが使いやすくなったので、しのごのいわずにまずは使ってみろ、というグーグルアドセンスからのお知らせを受け、これをためしに実装してみることにした私は、その動作確認中に、ある恐ろしいことを発見してしまいました。

Androidスマホのバグ、というか不具合です。

この、Androidスマホの不具合に関してはじつは以前にも似たようなことがあり、そのときは文字サイズがバグっていたのですが、なんと今回は、検索窓やコメント欄などの文字入力欄に文字を打ち込むと、画面の幅が変動する(画面揺れを起こす)といった、またしても文字絡みの不具合だったのです。

もう勘弁してくれよと思いながらも、見つけてしまったからには修正しなければなりません。そしていちおう、修正も完了したことはしたので、今回は、WordPressで運営している当ブログに起きた不具合の詳細と、その修正方法(応急処置)について残しておきます。

関連記事

解決した文字サイズのバグはこちら
Androidスマホのクロームで文字サイズが大きくなるバグの修正完了!

Googleの「検索エンジン」を導入してみた

2020年11月、Googleが提供している「検索エンジン」という、サイト内を検索するためのフォームが一新されたというお知らせが来ていました。

これまでは利用するのが少々面倒で、どうも使いにくそうな気配があったこと、当ブログで利用しているWordPressには標準で検索フォームの機能があり、そちらを使っていたことなどから、実装してみようと思ったことはありませんでした。

しかし、以前よりも設置がものすごくらくになり、しかも広告も配信されるので収益を出すことも可能となるとのことだったので、まぁ、そういうことならためしに使ってみようじゃないですか、と思い、私はこれを設置してみることにしたのです。

グーグルの検索エンジン

そしてこちらが、そのグーグルの検索エンジン。

パソコン版の検索エンジン

PC版はこのように、設置した場所に合わせたサイズで、サイト内をキーワードで検索できるようになっています。

スマホ版の検索エンジン

スマホ版も同様で、とくに機能は変わらないようです。

検索した結果が同一のページに表示されるので、これはこれで使いやすいような気もしますし、ヒットしたキーワードも表示されるので、標準の検索フォームよりも見やすいかもしれません。

ただ、どのへんに広告が配信される要素があるのかはまったくわからず、配信される気配もないことから、これを使い続けるかどうかはわからないのですが、ひとまず動作確認だけはしておこうと、PC、スマホで確認作業を行っていたときでした。

またしても、Androidのスマホが妙な挙動を見せ始めたのです!

スマホの文字入力の際にサイト幅が揺れる問題

ことの始まりは検索窓に文字を入力していたときで、文字を入力するためにスマホのキーボードが開かれると、画面がなぜか揺れる(ずれる)、というか縮み、キーボードを閉じるとまた元に戻る、という不可解な現象が発生したことでした。

私は、これはグーグルの検索エンジンに問題があるのだろうと思い、残念ながらこれを即撤去、以前から使用していた検索フォームに戻したのですが、なにか嫌な予感がしたので動作確認を続けていると、なんと、もともとの検索フォームでも同様の不具合が発生することが確認できたのです!

さらに、この画面揺れによって一部の広告の場所(高さ)がズレるというなぞめいた現象までもが発生するなど、私を待ち受けていたのは、かつてのトラウマがよみがえるような展開。

しかし、今回はこんなものでは終わりませんでした。

スマホで文字入力時にサイト幅がずれる不具合

文字入力で不具合が起こるということは、コメント欄や問い合わせフォームも標的になっていると考えるのが妥当であり、やはり、コメント欄に文字を入力した際にも、サイト右側の幅、赤枠で囲った分だけ揺れることを確認。

スマホで文字入力時にコメント欄が上にずれる不具合

加えて、きわめつけは、コメント欄で改行すると、そのたびに画面が上にずれていき、最終的にはコメント欄がフェードアウトしてしまうという、まったくもって笑えない現象までをも確認することができたのです!

もはやわけがわからない。

しかし放置するわけにもいかないので、どういった状況で不具合が出るのかを確認していると、以下のような条件で不具合が発生するということがわかりました。

  • 端末はAndroidスマホで確認(iPhoneでは確認できず)
  • ブラウザはクローム、それ以外でも発生
  • 特定の広告が配信されたときの文字入力でのみ画面が揺れる
  • その特定の広告のみ文字入力で位置がずれる
  • 複数のキーボードでも症状を確認

これをまとめると、Androidのスマホを使用している+特定の広告が配信される+コメント欄に文字を入力する、という、限定的な条件でのみ発生するバグのように思われました。

ただ、これはいったいどうなのでしょう。私はもう、使用しているAndroidのスマホ(Galaxyの安いやつ)がダメなような気がしてなりません。

画面揺れの修正には成功した

この問題を解決するためにあれこれを手を尽くしたものの、症状があまりにも限定的であること、私もそこまでは詳しくわからないことから、根本的な解決策を見つけるには至りませんでした。

ただし、以下のコードをスタイルシート(css)に追加することで、この不具合はいちおう修正することには成功しました。

@media screen and (max-width : 480px){
	html,
	body {
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
}

このコードは、「480px以内の画面(スマホ)の場合、横にはみ出しているものを表示しないようにする」というものらしく、私の場合、べつになにかがはみ出していたわけではなく、なぜこれでなおったのかも正直よくわかっていないのですが、なおることはなおりました。

不具合の発生条件が限定的で、しかもこのコードは本来、応急処置のような使い方が好ましいようで、場合によってはほかで問題が起きてしまう可能性もあることから、このままの状態にしておくのもよくないのかもしれません。

ただ、不具合の原因がなぞすぎることから、いまのところ打つ手がないので、しばらくはこれで私は様子を見てみることにしたのです。

ついでに広告の幅も揺れた

ブログのコメント欄と広告の位置関係

また、当ブログではこのように、スマホではコメント欄の下に広告を配置するデザインになっているのですが、まさかのここでも、もう一発問題が起きてしまいました。

コメント欄の下で左にずれた広告

コメント欄に文字を入力すると、横幅いっぱいに表示されていた広告が左にずれてしまうことがあるのです。

これも、Androidスマホ+特定の広告+コメント欄に入力という条件が重ならなければ発生することはないものでした。

広告とスクロールボタン

ちなみに、これの原因はおそらくこのスクロールボタンで、広告が重ならないように避けてくれていることで、こういった現象が起きているものと思われます。

しかし、この状況が問題になるというのは、Androidスマホの使用+特定の広告が配信される+コメント欄に入力する+やっぱり途中でコメントするのはやめる、という超限定的な場面でのみの話だと思われるので、私はもうあきらめました。

いちおうタグのパラメータをいじることで、ずれをなおすことはできましたが、もうこれはいいでしょう。Androidスマホの不可解な現象への対応で、私は疲れてしまいました。

今回のまとめ

・Androidのスマホは不具合が多い気がする
・コメント入力欄のバグは例のコードでなおることはなおる
・収穫はあったのでよしとした

世の中というものは、なんでもかんでも問題が解決できるほど甘いものではなく、時には、問題を放置しなければならないこともあるのかもしれません。

今回の件のように、症状があまりにも限定的で、原因が不明なのであれば、応急処置のまま放置、という選択肢も致し方ないのかもしれないと思わされました。

ただ、動作確認でコメント欄に文字を打ち込んでいたところ、入力された文字がやたらと小さいまま(12pxだった)放置されていたことに気づき、文字サイズを大きくすることができたので、いちおう収穫はあったように思います。

以前と比べて、若干コメントが書きやすくなったということです。この件は、もうそれでいいかなと思っています。

スポンサーリンク
この記事をシェアする

コメントを残す

日本語が含まれない投稿は反映されませんのでご注意ください。なお、コメントは承認制となっているため、反映までにお時間をいただく場合などがございます。