Mobile Development
1.0.0
화면의 대각선 길이를 인치 단위로 나타냅니다. 공통 크기는 3.5 인치, 4.0 인치, 5.0 인치, 5.5 인치, 6.0 인치 등입니다.
참고 : 1 인치 (인치) = 2.54 cm (cm)
수평 및 수직 방향으로 화면의 총 물리적 픽셀 포인트 수를 나타냅니다. 이는 일반적으로 n * m로 표시됩니다. 예 : iPhone6의 화면 해상도는 : 750 * 1334 입니다.
| 모델 | 해상도 (물리적 픽셀의 합) |
|---|---|
| iPhone 3G/3GS | 320 * 480 |
| iPhone 4/4s | 640 * 960 |
| iPhone 5/5s | 640 * 1136 |
| iPhone 6/7/8 | 750 * 1334 |
| iPhone 6p / 7p / 8p | 1242 * 2208 |
| iPhone X | 1125 * 2436 |
| 하웨이 P30 | 1080 * 2340 |
| Hawei Mate40 | 2772 * 1344 |
| Xiaomi 10 | 2340 * 1080 |
| Xiaomi 11 | 3200 * 1440 |
화면 픽셀 밀도는 화면의 각 인치에 포함 된 물리적 픽셀 포인트의 수 를 나타냅니다. 장치는 PPI (인치당 픽셀)입니다. 실제로, 다른 단위 DPI (인치당 도트)가 있습니다. 두 값의 계산 방법은 동일하지만 사용 시나리오는 다릅니다. PPI는 주로 화면을 측정하는 데 사용되며 DPI는 주로 프린터, 프로젝터 등을 측정하는 데 사용됩니다.
장치 픽셀이라고도하는 물리적 픽셀은 길이 (px) 단위입니다. 물리적 픽셀은 화면의 물리적 이미징 포인트로, 작은 발광 물리적 구성 요소 (단순히 작은 전구로 이해할 수 있음) 인 화면이 표시 할 수있는 최소 세분성입니다. 화면의 물리적 픽셀 포인트 (해상도)는 휴대폰 화면의 중요한 매개 변수이며 화면 제조업체에 의해 결정되며 생산 후에는 수정할 수 없습니다 . 예를 들어, iPhone6이 수평 방향으로 보유한 물리적 픽셀은 750이고 수직 방향에있는 물리적 픽셀은 1334이며 이는 750*1334로 표시됩니다.
CSS Pixel은 다음과 같이 알려져 있습니다 : 논리 픽셀. CSS 픽셀은 길이의 초록 단위이며 단위는 PX입니다. 웹 개발자가 웹 페이지의 컨텐츠 크기를 정확하게 측정 할 수 있도록 만들어졌습니다. CSS JS Less를 쓰는 데 CSS 픽셀을 사용합니다.
장치 독립적 픽셀은 DIP 또는 DP (장치 독립적 픽셀)라고하며 : 화면 밀도 독립적 픽셀로도 알려져 있습니다.
소개 : [HD 화면]이 나타나지 않은 시대에는 1 CSS 픽셀이 1 개의 물리적 픽셀에 해당하지만 [HD 화면]의 출현 이후 두 사람은 더 이상 1 대 1 관계가 아닙니다. 2010 년 Apple은 새로운 디스플레이 표준을 시작했습니다. 화면 크기가 변경되지 않은 상태에서 더 많은 물리적 픽셀 포인트를 화면으로 압축하여 해상도가 높아지고 디스플레이 효과가 더 좋고 섬세해질 것입니다. Apple 은이 화면을 호출합니다. Retina Screen (Retina Screen)이라고도 동시에이 화면 인 iPhone 4가 장착 된 Epoch -Making 디지털 제품을 시작했습니다.
프로그래머는 다음과 같이 썼습니다. 너비 = 2px, 높이 = 2px 상자. CSS 픽셀이 1 개의 물리적 픽셀에 직접 해당하는 경우, iPhone3g/s의 화면 크기와 iPhone4의 화면 크기가 iPhone4의 화면 크기와 동일하기 때문에 iPhone4의 화면은 더 많은 물리적 픽셀을 수용 할 수 있으므로 iPhone4의 물리적 픽셀은 iPhone3g/s의 물리적 픽셀보다 훨씬 작습니다. 이론적 으로이 상자는 iPhone3G/S 화면보다 iPhone4 화면에서 훨씬 작습니다. 사실 iPhone3g/s는 iPhone4와 같은 크기입니다! ! ! 그러나 iPhone 4는 더 섬세하고 명확합니다. 어떻게해야합니까? 이것은 장치의 독립적 인 픽셀에 따라 다릅니다. 
장치의 독립적 인 픽셀의 출현으로 인해 [HD 화면]에서도 요소가 정상적인 크기를 갖습니다. S는 코드가 장치의 영향을받지 않습니다. 화면 특성에 따라 장치 제조업체가 설정하고 변경할 수 없습니다.
픽셀 비율 (DPR, 장치 픽셀 비율) : 단일 방향으로 [물리적 픽셀] 및 [장치 독립 픽셀]의 비율. 즉, DPR = 물리 픽셀/장치 독립 픽셀
| 모델 | 해상도 (물리적 픽셀의 합) | 장치 독립 픽셀 (DIP 또는 DP) | 픽셀 비율 (DPR) |
|---|---|---|---|
| iPhone 3G/3GS | 320 * 480 | 320 * 480 | 1 |
| iPhone 4/4s | 640 * 960 | 320 * 480 | 2 |
| iPhone 5/5s | 640 * 1136 | 320 * 568 | 2 |
| iPhone 6/7/8 | 750 * 1334 | 375 * 667 | 2 |
| iPhone 6p / 7p / 8p | 1242 * 2208 | 414 * 736 | 3 |
| iPhone X | 1125 * 2436 | 375 * 812 | 3 |
https://uiiiiiiii.com/screen/index.htm
비트 맵 및 벡터 다이어그램
비트 이미지 픽셀도 길이 단위입니다. 비트 이미지 픽셀은 비트 맵에서 "작은 그리드"로 이해 될 수 있으며, 이는 비트 맵의 가장 작은 단위입니다.
현재 로고 만 고화질로 표시되거나 문제를 해결하기 위해 SVG 형식 로고를 제공 할 수 있습니다. 그렇지 않으면 미디어 쿼리가 사용됩니다.
@media screen and ( -webkit-min-device-pixel-ratio : 2 ) {
. logo {
content : url (.. / imgs / logo@ 2 x.jpg)
}
}
@media screen and ( -webkit-min-device-pixel-ratio : 3 ) {
. logo {
content : url (.. / imgs / logo@ 3 x.jpg)
}
}PC 쪽에서 뷰포트의 기본 너비는 브라우저 창의 너비와 동일합니다. CSS 표준 문서에서 뷰포트는 다음과 같은 블록을 포함합니다. 이는 모든 CSS 백분율 너비 계산의 근본 원인입니다. PC 측에서 너비는 다음과 같은 방법으로 얻을 수 있습니다.
console . log ( '最干净的显示区域' , document . documentElement . clientWidth ) ; // 常用
console . log ( '最干净的显示区域+滚动条' , window . innerWidth ) ;
console . log ( '最干净的显示区域+滚动条+浏览器边框' , window . outerWidth ) ;
console . log ( '与浏览器无关，当前设备显示分辨率横向的值' , screen . width ) ; 모바일 장치에서 브라우저 제조업체는 상대적으로 큰 문제에 직면 해 있습니다. 수평 스크롤 막대없이 모바일 장치에 수십만, 심지어 수억, 심지어 수억, 심지어 수백만 개의 PC 웹 페이지를 어떻게 제시합니까? 그런 다음 모바일 터미널의 세 가지 개념을 소개해야합니다. 1. 레이아웃 뷰포트, 2. Visual Viewport, 3. 이상적인 뷰포트
휴대 전화에서 초기 페이지 디스플레이 문제를 해결하는 데 사용됩니다. 초기에는이 작업을 수행했습니다. PC 웹 페이지의 너비는 일반적으로 960px입니다. 이 범위를 초과하더라도 1024px 범위, 960px 1024px 영역은 여전히 본체의 위치입니다.
브라우저 제조업체는 모바일 장치 용 컨테이너를 설계했습니다. 먼저이 컨테이너를 사용하여 PC의 웹 페이지를 고정하십시오. 이 컨테이너의 너비는 일반적으로 980px 입니다. 장치가 다를 수 있지만 차이는 크지 않습니다. 그런 다음 컨테이너는 휴대폰과 동일한 너비에 비례하여 동일하게 압축되므로 스크롤 막대가없고 페이지를 완전히 제시 할 수 있습니다. 그러나 웹 페이지의 내용이 너무 작아서 사용자 경험에 심각한 영향을 미칩니다.
모바일 터미널에서 레이아웃 뷰포트를 얻는 방법 : document.documentElement.clientWidth (일반적으로 980px, iPad Pro는 1024px)
참고 : 레이아웃 뷰포트가 압축 된 후, 수평 너비는 더 이상 375px가 아니라 레이아웃 뷰포트가 압축되어 가로 채지 않기 때문에 980px입니다.
Visual Viewport는 사용자가 보이는 영역입니다. 절대 너비는 항상 장치 화면만큼 넓지만이 너비에 포함 된 CSS 픽셀의 값은 다양합니다. 예를 들어, 일반적으로 휴대 전화는 980 CSS 픽셀을 Visual Viewport (Visual Viewport Size = Layout Viewport Size) 에 넣고 iPad Pro는 1024 CSS 픽셀을 Visual Viewport에 넣습니다.
Mobile Terminal : window.innerWidth 에서 Visual Viewport를 얻는 방법이지만 Android 2, Opera Mini 및 UC8에서는 올바르게 얻을 수는 없습니다. (일반적으로 시각적 뷰포트는 코드를 통해 볼 수 없습니다)
iPhone 6을 예로 들어 보면 화면을 설명하십시오.
화면 너비 (DP/DIP)와 동일한 레이아웃 뷰포트를 이상적인 뷰포트라고하므로 이상적인 뷰포트는 표준입니다. 레이아웃 뷰포트 너비와 화면 (DP/DIP)은 메타 태그에 의해 달성됩니다.
이상적인 뷰포트를 설정하는 특정 방법 :
< meta name =" viewport " content =" width=device-width " >【요약 ize :
1. 설명 화면 : 물리적 픽셀 : 750p ×, 장치 독립 픽셀 : 375px, CSS 픽셀 : 980px. 2. 장점 : 다른 장치에서 요소의 렌더링 효과는 200 개의 넓은 상자와 같은 레이아웃 컨테이너에 의해 스케일링되기 때문에 거의 동일합니다. 200/980 3. 단점 : 요소가 너무 작고 페이지 텍스트가 불분명하고 사용자 경험이 좋지 않습니다.
1. 설명 화면 : 물리적 픽셀 : 750px, 장치 독립 픽셀 : 375px, CSS 픽셀 : 375px. 2. 장점 : 페이지가 명확하게 표시되고, 콘텐츠는 더 이상 관찰하기가 어렵지 않으며 사용자 경험이 더 좋습니다. 3. 단점 : 같은 요소가 다른 화면 (장치)에 대해 다른 렌더링 효과를 갖습니다. 예를 들어, 375 넓은 상자 : 375/375 및 375/414 (동등한 디스플레이가 아님). 4. 그것을 해결하는 방법 : 적응하십시오.
확대 할 때 :
크기 감소 :
알고리즘 프로세스 : 확대 할 때 브라우저는 특정 비율의 영역을 안쪽으로 가로 채고 나머지 사진을 전체 뷰포트와 동일한 비율로 즉시 채우면 내려 놓을 수없는 요소가 자동으로 래핑됩니다.
스크립트 모니터링 :
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
// pc端， onresize监测的是视口的变化（初识包含块）
window . onresize = ( ) => {
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
} 확대 할 때 :
참고 : 스케일링 중에 레이아웃 뷰포트 크기가 변경되지 않기 때문에 모바일 스케일링은 페이지 레이아웃에 영향을 미치지 않습니다.
메타 뷰포트 태그는 2007 년 Apple에 의해 모바일 레이아웃 뷰포트를 제어하여 980 레이아웃 뷰포트의 업계 규칙을 변경하려고 시도했습니다. 뷰포트 관련 옵션 :
너비 값은 장치 범위 또는 특정 값일 수 있지만 일부 안드로이드 폰은 특정 값을 지원하지 않으며 전체 iOS 시리즈는 지원합니다.
width=device-width, initial-scale=1.0 함께 기록됩니다.사용자 스케일링에 허용되는 최대 스케일 [Safari는 지원하지 않음] 최대 규모 = 화면 너비 (DIP 독립 픽셀, DIP) / Visual Viewport 너비
사용자가 최소 규모를 확장 할 수있는 최대 스케일 = 화면 너비 (DIP 독립 픽셀, DIP) / Visual Viewport 너비
사용자가 손가락을 통해 페이지를 확대 할 수 있는지 여부 [Safari는 지원하지 않습니다]
커버로 설정하면 [Notch Screen]에서 공백 문제를 해결할 수 있습니다.
< meta name =" viewport " content =" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover " >1. 왜 적응해야합니까? 모바일 장치의 스크린 크기가 다르기 때문에 다음과 같은 요소가 두 개의 다른 전화 (다른 비율)에 다른 효과를 보일 것입니다. 다른 장치에 동일한 요소가 표시되면 조정해야합니다. 어떤 적응 방법이 사용 되든 중심 원칙은 항상 다음과 같습니다. 동일 비교!
세 가지 주류 적응 방법이 있습니다.
EM과 REM은 둘 다 CSS의 길이 단위입니다. 둘 다 상대적 길이 단위이지만 둘은 약간 다릅니다.
이상적인 뷰포트에서 디자인 드래프트 (DIP는 375px)는 표준으로 사용되며 루트 글꼴은 다른 장치의 딥과 일치하도록 100px입니다.
이상적인 뷰포트에서 루트 글꼴을 DIP/10으로 설정하십시오.
1 VW = 레이아웃 뷰포트 너비의 1% 1% VH = 레이아웃 뷰포트 높이의 1%
호환성보기 : caniuse.com
HD 화면의 1px는 더 많은 물리적 픽셀 (작은 전구)에 해당하므로 1 픽셀 테두리가 두껍게 보입니다. 솔루션은 다음과 같습니다.
@media screen and ( -webkit-min-device-pixel-ratio : 2 ){
# demo {
border : solid 0.5 px black;
}
}
@media screen and ( -webkit-min-device-pixel-ratio : 3 ){
# demo {
border : solid 0.333 px black;
}
}모바일 이벤트 목록
위의 이벤트는 iOS 사파리에서 처음 등장하여 특별 정보를 개발자에게 전달했습니다.
알아채다:
터치 이벤트가 완료되면 요소의 클릭 이벤트가 기본적으로 트리거됩니다. 완벽한 뷰포트가 설정되지 않으면 이벤트의 시간 간격은 약 300ms입니다. 완벽한 뷰포트가 설정되면 시간 간격은 약 30ms입니다 (특정 장치 특성에 따라 다름).
터치 이벤트로 인해 요소가 숨겨지는 경우 클릭 동작이 그 뒤에있는 요소에 작용하여 클릭 이벤트 또는 새 요소의 페이지 점프를 트리거합니다. 이 현상을 클릭 침투 라고합니다.
기본 동작을 차단합니다
btn . addEventListener ( 'touchend' , ( event ) => {
event . preventDefault ( )
shade . style . display = 'none'
} ) 무대 뒤에서 요소를 클릭 특성이없고 일반적인 div 태그로 수정하십시오.
< div id =" baidu " >点我去百度</ div >터치 엔드 이벤트를 사용하고 클릭하여 새 웹 페이지로 이동하십시오.
baidu . addEventListener ( 'touchend' , ( ) => {
window . location . href = 'https://www.baidu.com'
} ) CSS의 포인터 이벤트 속성을 사용하여 클릭 이벤트를 일시적으로 잃고 300 밀리 초 후에 복원하십시오.
# baidu {
display : block;
width : 100 % ;
height : 300 px ;
background-color : skyblue;
pointer-events : none;
} btn . addEventListener ( 'touchend' , ( ) => {
shade . style . display = 'none'
setTimeout ( ( ) => {
baidu . style . pointerEvents = 'auto' // 恢复正常
} , 300 ) ;
} ) 숨겨진 요소가 숨기기 전에 약 300 밀리 초씩 지연되도록하십시오.
btn . addEventListener ( 'touchend' , ( ) => {
setTimeout ( ( ) => {
shade . style . display = 'none'
} , 300 ) ;
} ) 
