논리적 적응의 개념

이동단의 적응이기 때문에, 이 기술 명사는 분명히 이유가 있을 것이다. 모바일 단말기의 적응은 애플, 화웨이 등과 같은 휴대전화의 급속한 발전 문제를 해결하기 위한 것이다. 브랜드별로 휴대전화의 물리적 해상도가 다르면 장치마다 논리적 해상도가 달라질 수 있다. 이때 px 쓰기가 죽으면 뷰가 눌려 표시되지 않는 문제가 발생할 수 있습니다. 아무도 보고 싶어하지 않거나 스크롤 막대의 절반만 좌우로 드래그해야 한다.

픽셀

우선 일상적인 휴대전화의 대각선 길이는 이 화면의 크기이며 320x480 은 해상도라고 합니다. 이 해상도는 수평 320 픽셀, 수직 480 픽셀로 구성됩니다. 그래서 일반적으로 해상도는 화면 크기와 관련이 있습니다. 1 픽셀은 화면의 가장 작은 색상 블록으로 집의 평방 미터를 계산하는 것과 약간 비슷합니다. 따라서 논리적 픽셀과 물리적 픽셀을 이해해야 합니다.

1, 물리적 픽셀 (실제 해상도)

장치 픽셀, 같은 장치에서 물리적 픽셀은 고정되어 있습니다. 이 픽셀은 공장에서 설정됩니다. 즉, 장치의 해상도가 고정되어 있습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 장치명언)

2. 논리 픽셀 (디스플레이 해상도)

CSS 픽셀 (뷰포트의 작은 정사각형) 과 논리적 픽셀은 CSS 스타일 코드에 사용됩니다. 장치의 물리적 픽셀이 논리적 픽셀과 같으면 문제가 없습니다. 그러나 아이폰 4 에서 물리적 픽셀은 640px960px 이고 논리적 픽셀 수는 320480px 입니다. 따라서 하나의 CSS 픽셀을 표시하려면 약 4 개의 물리적 픽셀이 필요합니다.

3. 픽셀 비율

물리적 픽셀과 논리적 픽셀 사이의 비율입니다. 픽셀 비율이 1: 1 일 때 1 개의 물리적 픽셀로 1 개의 논리적 픽셀을 표시합니다. 픽셀 비율이 2: 1 일 때 4 개의 물리적 픽셀을 사용하여 1 개의 논리적 픽셀을 표시합니다.

4.CSS 의 1px 가 디바이스의 1px 와 같지 않습니다.

일반적으로 CSS 의 단위는 Px 입니다. 웹 브라우저에서 CSS 의 1 픽셀은 종종 컴퓨터 화면의 1 물리적 픽셀에 해당하므로 CSS 의 픽셀이 장치의 물리적 픽셀이라는 착각을 불러일으킬 수 있습니다. 하지만 그렇지 않습니다. CSS 의 픽셀은 추상적인 단위일 뿐입니다. CSS 에서 1px 가 나타내는 장치의 물리적 픽셀은 장치나 환경에 따라 다릅니다.

이전 모바일 장치에서는 아이폰 3 과 같이 인치당 화면 픽셀이 비교적 낮았으며 해상도는 320480 이었습니다. 아이폰 3 에서 1 CSS 픽셀은 실제로 1 물리적 픽셀과 같습니다. 나중에 기술이 발전함에 따라 모바일 장치의 픽셀이 점점 높아지고 있다. 아이폰 4 부터 소위 망막 화면이 도입되어 해상도가 두 배로 높아져 640960 에 이르렀지만 화면 크기는 변하지 않았다. 즉, 같은 크기의 화면에 있는 픽셀이 두 배로 늘어났다. 이 시점에서 1 CSS 픽셀은 4 개의 물리적 픽셀과 같습니다.

5. 실제 1 물리적 픽셀을 구현합니다.

Viewport 속성의 초기 비율이 1 이면 페이지 크기가 정상이지만 초기 비율이 0.5 이면 페이지가 1 배로 줄어듭니다. 픽셀 비율이 2: 1 인 장치의 경우 원래 1 인 CSS 픽셀 폭은 2 개의 물리적 픽셀 폭을 차지하고 축소된 1 인 CSS 픽셀 폭은 65433 에 불과합니다.

뷰포트

1. 배치 뷰포트

PC 측에서 웹 페이지의 배치 뷰포트는 브라우저 페이지가 표시되는 전체 영역이며 웹 페이지의 도면 영역으로 해석될 수 있습니다. 이동측에서는 화면이 작아 PC 측 페이지의 모든 내용을 표시할 수 없으므로 기본적으로 (컨트롤 없음) 이동측에서는 브라우저 표시 영역보다 큰 배치 뷰포트 (일반적으로 980px) 를 지정합니다. Chrome 브라우저의 실험 결과에 따르면 viewport 컨트롤이 없는 페이지의 기본 너비는 980px, 즉 너비가 980px 인 페이지에 페이지를 그리는 것으로 나타났습니다.

2. 가시 뷰포트

이름에서 알 수 있듯이 시각적 뷰포트는 브라우저의 가시 영역, 즉 모바일 장치에서 볼 수 있는 영역을 나타냅니다. 배치 뷰포트와 구별하기 위해 웹 페이지의 실제 도면 영역 뷰포트 크기는 휴대폰에서 볼 수 있는 것보다 크기 때문에 우리 휴대폰의 시각적 뷰포트에는 수평 스크롤 막대가 있습니다.

3. 이상적인 창

이상적인 뷰포트란 페이지 드로잉 영역이 장치 폭에 완벽하게 맞는 뷰포트 크기를 말하며 스크롤 막대 없이 웹 사이트의 모든 내용을 정상적으로 볼 수 있습니다. 문자와 그림이 선명합니다. 예를 들어 모든 아이폰에 이상적인 뷰포트 폭은 320px, 안드로이드 장치에 이상적인 뷰포트는 320px, 360px 등입니다.

즉, 모바일 터미널의 적응은 픽셀 비율이 결정된 경우 배치 뷰포트 크기의 웹 페이지를 시각적 뷰포트에 완벽하게 배치하는 것입니다. 이는 다양한 크기의 휴대폰 화면에서 웹 페이지를 균일하게 완벽하게 표시하거나 작성된 웹 페이지에 따라 다른 맞춤 체계를 사용하여 균일하게 압축하거나 늘이는 것과 같습니다. 페이지 크기를 조정할 수 있습니다.

---------

원문 링크: /QQ _ 4 1578093/ 문장/상세/107288649.

上篇: 컴퓨터와 마이크로컨트롤러 간의 직렬 통신 下篇: 시각 및 약시 치료 장치의 가격은 얼마인가요?