아이폰/사파리에서 Input 요소 라운딩 문제

워드프레스 테마나 플러그인을 수정하다 보면 아이폰/안드로이드 기기나 IE/크롬/사파리와 같은 브라우저에 따라 레이아웃이 달리 보이는 경우가 많습니다. 이런 문제는 워드프레스를 비롯한 웹사이트 제작자에게 골치덩어리인 것 같습니다.

아이폰/아이패드의 사파리(Safari)에서 Input 상자가 둥글게 나오는 경우 다음과 같은 코드를 사용하여 라운딩을 제거할 수 있습니다.

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

아이폰/아이패드 버전별 CSS 미디어 쿼리(media query)

그리고 아이폰/아이패드의 버전별 CSS 미디어 쿼리로 다음과 같이 device-aspect-ratio 기능을 사용할 수 있습니다. (이 글에서도 아이폰 관련 미디어 쿼리를 다루고 있지만 아래 코드가 더 효율적인 것 같습니다.)

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