이름:
메일:
가입일:
2023-09-11 12:24조회수: 1478[운영자]영이
@supports (-webkit-touch-callout: none) {
/*아이폰 전체*/
padding-bottom: 30px;
.padding-bottom {
/* iPhone X 이하일 때 */
@media only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
padding-bottom: calc(48px + #{$-h-btn-fixed} + #{$-spacing_y}) !important;
padding-bottom: calc( 48px + #{$-h-btn-fixed} + #{$-spacing_y}) !important;
/* iPhone X 이상일 때 */
@media only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait),
only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
padding-bottom: calc(constant(safe-area-inset-bottom) + 48px + #{$-h-btn-fixed}) !important;
padding-bottom: calc(env(safe-area-inset-bottom) + 48px + #{$-h-btn-fixed}) !important;
}
}
}
}
아이폰만, 게다가 아이폰 버전별로 css를 먹이는 key는 바로
-webket-touch-callout: none과
-webkit-min-device-pixel-ratio 두가지였다.
일단 테스트해보면 웬만한 아이폰에서는 정상적으로 잘먹힘.
앱이 아니라 웹에서는 safe area대응이 정말 불편하고
일일이 수동으로 다 짜줘야해서 너무 어려웠던 기억이 난다.
아이폰은 X부터 홈버튼이 사라지고 home bar가 생겼는데, 마침 이 시기에 픽셀비율이 3이상이 되어서
홈바가 있냐 없냐 구분은 픽셀비율이 2냐 3이냐로 따지면 됨.
프론트엔드 npm 라이브러리 제작하기
모름지기 개발자라고 하면 다른 사람이 쉽고 편하게 사용할 수 있는 라이브러리 제작정도는 한 번 쯤 목표로 잡아본 적이 있지 않을까 한다.웹팩과 같은 모듈 번들러에...
PM2 프론트엔드 프로젝트(Nextjs, React, Vue) Jenkins로 자동배포 시스템 만들기
프론트엔드도 자동배포가 가능하다.하지만 이걸 알아내는건 쉽지 않았다.그동안 남의 기술 블로그들을 보면서,왜 해보지도 않고 대충 배껴서 적었지?어째서 되지도 않는걸 되는 것처럼 적어...
아이폰 safe-area 대응하기 (아이폰 X 이상, 이하 구분하기)
@supports (-webkit-touch-callout: none) { /*아이폰 전체*/ padding-bottom: 30px; .padding-bottom { /* iPhone X 이하일 때 */ @media only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) and (orientation
input file 파일 복수 업로드 구현
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t...
axios 취소 기능으로 검색 debounce 구현하기
<input type="text" oninput="handleInputChange(event)">태그는 이거 하나만 들어가있으면 된다.let cancelToken; f...
댓글: 0