submitボタンのCSSがモバイル端末だけ適応されません。。。

Question

railsアプリでmedia queryによるレスポンシブウェブデザインを採用しているのですが、なぜかモバイル端末(iPhone,iPad)で閲覧した時にフォームのsubmitボタンのCSSが適応されません。
macでブラウザ幅をスマホサイズ、タブレットサイズにしてみるとちゃんとCSSが適応されているので、モバイル端末だけsubmitのCSSが適応されていないみたいです。(chromeとsafariで確認済み)
この場合、どのようなことが原因だと考えられるでしょうか？

<%= f.submit :class => 'submit' %>

application.css
#デフォルトサイズ(スマホ)
.submit { width:100px; height:40px; border-dadius:10px; color:white; background-color:#55acee; }

@media (min-width: 500px){
#タブレットサイズのCSS
}
@media (min-width: 768px){
#デスクトップサイズのCSS
}

上記の設定でスマホとタブレットから確認すると、widthとheightだけCSSが適応されていると思われます。
border-radiusは設定よりも丸くなっていて、色もグラデーションがかかっていて、デフォルトのサブミットボタンのデザインのままになっているっぽいです。

Answer 1

reset.cssなどは導入していますか？
PCとモバイルでは同じ名前のブラウザでもつくりが違います。
各ブラウザがもともと持っている「ユーザーエージェントスタイルシート」というものがありますが、その指定を打ち消していないとうまくスタイルが反映できません。

.submit{
  appearance: none;
  border: none;
  border-raduis: none;
  …略
}

のような感じでまずはデフォルトのスタイルを消して確認してみてください。
必要ないところは装飾を上書きし、残りは自分のスタイルをあててください。

Comments

[TakumaN]

ありがとうございます！！無事直りました！！命の恩人です！！！！！