iPhoneの/サファリでInput要素の丸めの問題

WordPress テーマやプラグインを変更してみると、iPhone / Androidの機器やIE /クローム/サファリのようなブラウザによってレイアウトが違ってみえる場合があります。 このような問題は、 WordPressをはじめとするウェブサイトの制作者にとって、頭痛のようです。

iPhone / iPadのSafariからInputボックスが丸くなっている場合は、次のコードを使用して丸めを削除できます。

-webkit-appearance: none;
border-radius: 0;

iPhone / iPadバージョン別CSSメディアクエリ（media query）

そして、iPhone / iPadのバージョン別CSSメディアクエリで、 デバイスのアスペクト比 機能を使用できます。 （この記事私はiPhone関連のメディアクエリを扱っていますが、以下のコードはより効率的です。）

iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iPhone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

// Source: stackoverflow