아이 폰 X 디 스 플레이 문 제 를 해결 하 는 css 속성
1482 단어 css
https://juejin.im/entry/59bde53ff265da065e321ca0?utm_source=gold_browser_extension
알다 시 피 아이 폰 X 의 얼굴 인식 기능 은 매우 강하 다.그러나 브 라 우 저 화면 에 서 는 보기 에는 문제 가 되 지 않 지만 기본 적 인 상황 에 서 는 문제 가 있 을 수 있 습 니 다.
1. 정상 적 인 상황 에서 상하 두 개의 흰색 테두리 가 있 기 때문에 웹 페이지 배경 색 이 흰색 이나 다른 단색 색 이 아니라면 매우 갑 작 스 럽 게 보일 수 있 습 니 다.
해결 방법: body 태그 에 background - color 를 추가 하고 배경 색 은 웹 페이지 색 입 니 다.
2. 디자인 에 대해 추가 적 인 통 제 를 하거나 그 라 데 이 션 이나 이미 지 를 배경 으로 사용 하 는 것 을 좋아한다 면 배경 색 을 설정 하 는 것 은 불가능 할 수 있 습 니 다.애플 의 iOS 최신 버 전에 viewport - fit 를 추 가 했 습 니 다. 전체 화면 에 웹 페이지 를 표시 하고 meta 태그 에 viewport 를 설정 합 니 다.
3. safe - srea - inset - * 를 설정 하여 안전 경 계 를 확보 합 니 다.
가로 화면 을 볼 때 화면 오른쪽 은 그 센서 에 의 해 가 려 지고 홈 바 등 공간 은 시스템 에 보 존 돼 사용 되 기 때문에 링크 도 효력 을 잃 어 체험 불량 상황 을 초래 할 수 있 기 때문이다.Apple 은 몇 개의 CSSProperties 를 제공 하여 처리 합 니 다.
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
viewport - fit 를 설정 한 후 이 css 속성 을 사용 합 니 다:
.container {
padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);
} 。이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
