WEB制作の実機検証をしていたらiPhoneのSafariでだけ表示が崩れてしまって困りました。
原因はなんとiPhoneでコンテンツブロッカーを設定していたことでした。
iPhoneのSafariだけ表示がおかしい！
仕事でWEBページの制作をしている時に、リリース前に実機で動作チェックや検証を行います。
なぜか自分の使っているiPhoneのSafariでだけうまく表示されない部分がありました。
どうコードを書き換えても、位置を変えても変わらず表示が崩れている状態でした。
これは困る！
Safariと他のブラウザの違い
同じiPhoneで、ChromeやFirefoxなど別のブラウザで表示の確認をすると、どれももれなく綺麗に表示されているのです。
ということは、Safari にだけ何かが起こっている…？
と気づき、あることを思い出しました。
「コンテンツブロッカー入れてたわ」
Safariでは、自分のブログの広告を誤って押してしまわないようにと、広告を除外してくれるコンテンツブロッカーというアプリを入れて反映させていたのです。
うっかり！忘れてた…
コンテンツブロッカーを解除したら正常に表示された
試しに、コンテンツブロッカーをオフにしてみたところ
iPhoneのSafariでもWEBページが正常に表示されました！
でも、コンテンツブロッカーって広告を見えなくするものだよね？？
私が作っていて表示が崩れた要素はもちろん広告ではなく、普通に「テーブルタグ（table）」の中身でした。
コンテンツブロッカーの解除方法
iPhoneの設定アプリを開く
Safariの欄をタップ
コンテンツブロッカーの欄をタップ
利用しているコンテンツブロッカーアプリをオフの方にスイッチする
以上がコンテンツブロッカーアプリの解除方法です。
スイッチでオンオフがすぐ反映されるので、一時的に解除してSafariを確認してからまた設定するというのもありだと思います。
（また、設定方法も同じ手順になります。コンテンツブロッカーアプリも色々あるので気になる方はAppstoreで見てください。）
コンテンツブロッカーは広告以外も表示が崩れることがあるので注意
どうして広告じゃないのに見えなくなったの？
何やら、コンテンツブロッカーは広告を非表示にしたり見えなくしてくれる
ユーザーにとってはネットサーフィンがしやすくなる嬉しい機能ですが
中には表示が崩れてしまうことがあったり、CSSが読み込まれなくて見た目がなんのこっちゃ！になってしまうことがあるようです。
便利なものでも一長一短あるのか…と、そんな単純な話ではなさそうですし、
制作する側としては防ぐのも難しいなと思ったのが正直な感想です。
今回は自分が作ったページなので、表示が正常ではないと気づいてコンテンツブロッカーをオフにするという対策を取れましたが
たまたま見ているページが表示が正常でなく、崩れていても気づけないですよね。
広告以外も見えなくなる恐れが！
コンテンツブロッカーをお使いの方はこういうことがあるということをお気をつけくださいね。
コメント