iPhoneのSafariでボタン表示がおかしくなる件と解決法

2015年4月21日

いよいよ今日、Googleのモバイルフレンドリーアップデートが開始されましたね。

所有しているサイトの順位はどうですか？

わたしが所有しているサイトは大して影響がないような気がするんですが…

実験的な意味も込めてモバイルフレンドリー対策していないサイトもあるんですが
今のところそれほど目立った影響が見られないんですよね。

おそらくこれから何らかの影響があるものかと…

つい先日までモバイルフレンドリー対策に追われていたというか
このタイミングでサイトのマイナーチェンジしまくったことで時間が
かかっただけなんですが、その時にちょっとつまづいた点があったので
紹介したいと思います。

ランディングページをスマホ対応も視野に入れてスタイルシート（css）を
イジっていました。

エミュレーターでは問題なく表示されていたので「大丈夫だろう」と思い
いざアップしてスマホで実際に確認したところ…

フォームのボタンが意図したデザインと全く違うものになっていました。

「いやいやいや、何で？」

スタイルシート（css）をどのようにイジっても全く変化なし…

それがこちらです

フラットデザインのランディングページだったので画像のような
グラデーションになると完全に浮いてしまってるんです。

どうしたものかと思ったら解決法があったんです。

それがこれ

iPhoneのSafariが悪さをしていたようで、このコードを入れてやると

ボタンのスタイルシートが初期化されて、その後に入力したcssが
有効になるといった結論でした。

これで意図したデザインへ変更が出来ました。

「表示がおかしいのってスマホだけだし…」
ということで一瞬あきらめかけたのですが粘り強く対処してよかったなと
思う今日この頃です。

ちなみにそのランディングページはこちら
http://rambling-man.net/letter/monitor/

興味があったら登録してみてくださいね。