WordPressの利点の一つは、モバイル環境に適合するように多くのテーマが反応型(Responsive)をサポートしている点が挙げられるでしょう。 ここでは、PCとiPhone、アイパッド、スマートフォンなどの各種モバイル機器に使用できる メディアクエリです。 モバイル機器では、画面が正しく表示されないときに参照してください。 (メディアクエリの使用例は、 ここをご覧ください。)
/* 스마트폰 (가로 및 세로) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* ユーザー 코드 */ } /* 스마트폰 (가로 ) ----------- */ @media only screen and (min-width : 321px) { /* ユーザー 코드 */ } /* 스마트폰 (세로) ----------- */ @media only screen and (max-width : 320px) { /* ユーザー 코드 */ } /* 아이패드 (가로 및 세로) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* ユーザー 코드 */ } /* 아이패드 (가로) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* ユーザー 코드 */ } /* 아이패드 (세로) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* ユーザー 코드 */ } /* PC 및 노트북 ----------- */ @media only screen and (min-width : 1224px) { /* ユーザー 코드 */ } /* 대형 스크린 ----------- */ @media only screen and (min-width : 1824px) { /* ユーザー 코드 */ } /* 아이폰 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* ユーザー 코드 */ } /* 아이폰 5 & 5S 가로 및 세로 */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* ユーザー 코드 */ } /* 아이폰 5 & 5S 가로 ------ */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { /* ユーザー 코드 */ } /* 아이폰 5 & 5S 세로 ------ */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { /* ユーザー 코드 */ } /* 아이폰 6 세로 및 가로 */ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) { /* ユーザー 코드 */ } /* 아이폰 6 가로 */ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) { /* ユーザー 코드 */ } /* 아이폰 6 세로 */ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) { /* ユーザー 코드 */ } /* 아이폰 6 Plus 가로 및 세로 */ @media only screen and (min-device-width : 414px) and (max-device-width : 736px) { /* ユーザー 코드 */ } /* 아이폰 6 Plus 가로 */ @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) { /* ユーザー 코드 */ } /* 아이폰 6 Plus 세로 */ @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) { /* ユーザー 코드 */ } /* 아이패드 미니 가로 및 세로 */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) { /* ユーザー 코드 */ } /* 아이패드 미니 가로 */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { /* ユーザー 코드 */ } /* 아이패드 미니 세로 */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { /* ユーザー 코드 */ }
(Source:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/&http://stephen.io/mediaqueries/)
iPhoneの7は、iPhone 6と幅/高さが同じであるとね。
http://stackoverflow.com/questions/39815140/what-are-the-device-width-css-for-iphone7-plus 参照
https://www.thewordcracker.com/basic/turn-off-iphonesafari-input-element-rounding/ 記事に記載されdevice-aspect-ratio機能を使用すると、より便利に、iPhone / iPadのメディアクエリを使用することができます。