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

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

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

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

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

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

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

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

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

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

「いやいやいや、何で?」

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

それがこちらです
IMG_9672

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

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

それがこれ

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

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

IMG_9673

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

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

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

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