[CSS] スマホの本番環境で、CSSのボタンの背景色が反映されない問題が起きた時の対処

本番環境でスマホでみた時にボタンのCSS反応しない問題が起きた時の対処を整理。

本番環境でウェブサイトをみた時に、PCの画面ではボタンは反映されているものの、レスポンシブデザインではボタンの背景の色が反映されなくなった。

PCでは反映される。

スマホでみた場合、数字は反映されるのだが、背景のグレー色はなぜか反映されない。

しかし、Developer toolでみると、レスポンシブデザインの方も反映されている。

よくよくdeveloper toolをみてみると、Backgroundはuser against stylesheetで設定されていた。

自分で記述したCSSも、Background-colorで指定していたと思い込んでいた設定が、Colorで指定されていた。

つまり、CSSではデフォルトであるuser against stylesheetによってグレーに変更され、自分が設定していたと思い込んでいた色は設定されていなかったらしい。

Backgroundでボタンに色を指定して、変更してみた。

すると無事に実機でも表示。

Developer toolでみてみると、自分で指定したbackground-colorのbackgroundが表示され、user against stylesheetのbackground colorが消されているのがわかる。