미디어쿼리 height, max-height, min-height
충족시켜야되는 조건
- 플로팅 버튼으로 노출되어야 하는 기종 : IPhone 8 / Iphone SE
- 플로팅 버튼으로 노출되면 안되는 기종 : IPhone X / IPhone 11 / IPhone 11 Pro Max
/* 아래와 같이 css를 선언하면 safari web과 app 화면 모두 충족 */
@media screen and (max-width: 375px) and (max-height: 634px) {
}
기종별 width / height (web safari 기준)
| 기종 | width(px) | height(px) | 상하단바 크기(px) |
|---|---|---|---|
| 아이폰12 Pro Max | 428 | 746 ~ 860 | 114 |
| 아이폰12 Pro | 390 | 664 ~ 778 | 114 |
| 아이폰12 | 390 | 664 ~ 778 | 114 |
| 아이폰11 Pro Max | 414 | 719 ~ 833 | 114 |
| 아이폰11 Pro | 375 | 635 ~ 749 | 114 |
| 아이폰11 | 414 | 715 ~ 829 | 114 |
| 아이폰X | 375 | 635 ~ 749 | 114 |
| 아이폰8 Plus | 414 | 622 ~ 697 | 75 |
| 아이폰8 | 375 | 553 ~ 628 | 75 |
| 아이폰 SE | 375 | 553 ~ 628 | 75 |