ios 디바이스 용 뷰포트 메타 태그를 이해하려고합니다. 테스트 페이지를 만들었는데, 거기에 862 픽셀 크기의 이미지를 삽입했습니다. 1536 픽셀의 해상도 폭 아이 패드 3 아직은 해상도 너비가 뷰포트 메타 태그에서 1536이지만 ipad 3 장치 너비는 항상 768입니까?
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale: .5, maximum-scale: 5.0">
, 뷰포트는 아이 패드 (3)의 표시 영역을 동일한 양으로 862px 이미지를 설정 한 : 그래서 같은 뷰포트 메타 태그를 가지고 폭이 넓어서 가시 영역보다 조금 크다. 그래서 나는 이미지의 나머지 부분을보기 위해 수평으로 스크롤해야한다.
이렇게하면 장치 너비가 768 픽셀을 반환하고 862 픽셀 이미지의 가로 스크롤이 조금 더 늘어난 것 같습니다. 왜이 일을하는거야? 내가 설명해야 할 픽셀 밀도가 있습니까? 나는 수치 폭으로 폭을 설정하려고했습니다
UPDATE (이 경우 "862"에서) 이미지의 똑같은 폭입니다. 따라서 웹 페이지는 이미지와 동일하게 862X206이지만 장치 너비로 너비를 설정하는 것과 똑같은 일을합니다.
업데이트 2
나는 매우 간단한 페이지를 생성하고, 어떤 이유로 862 개 픽셀의 뷰포트에 빈 페이지 내 아이 패드 3, 코드 수평 및 수직 스크롤이 발생합니다
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=862, initial-scale=1.0">
</head>
<body style="width:100%; padding:0; margin:0">
</body>
</html>
이 스크롤로 인해 뷰포트가 표시 영역 또는 화면 크기에 맞지 않습니다. 나는 이해하지 못한다. 어떤 통찰력이라도 대단히 감사하겠습니다. 고맙습니다. ** 참고 ** 패딩과 마진을 0으로 재설정하는 것을 잊어 버렸습니다. 마진 8 px를 추가했습니다.
UPDATE 3
확인은, 원래, 나는 장치 폭이 아이 패드 3 분명히, 그것은 768 픽셀의 화면 크기를 반환의 1536 픽셀의 해상도 폭을 돌려 것이라고 생각했다.
모든 뷰포트 너비가 768보다 큰 경우, ipad에서 스크롤을 허용합니다. 3. 왜? 1024 픽셀의 페이지가 있고 ipad의 보이는 영역에 맞출 경우 3. 너비를 1024로 설정하고 초기 눈금을 1로 설정하고 1024px 뷰포트를 볼 수있는 영역? 당신이 당신의 페이지를 확장하는 방법을 각 장치의 그림을 갖고 싶어
솔루션
좋아, 그래서는 당신이 모든 초기 규모를두고있다.
그래서 장치 너비 또는 숫자 값을 사용하여 너비를 설정하고 초기 배율을 생략하면 자동으로 확대/축소가 계산됩니다. 그것은 효과가 있습니다. 규모 전에, 뷰포트의 폭이 768
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale: .5, maximum-scale: 5.0">
내 혼란 폭이 무엇을 의미하는지에 거짓말은, 폭이 스케일이 적용되기 전에 폭을 의미 내가 말 그렇다면 웹 페이지 본문은 862px이고 1.0의 배율 인수가 적용된 후 내용에 1.0, 862 * 1이 곱해집니다.0이므로 뷰포트의 너비 은 이제이고 해당 배율 요소에서 조정 된 내용의 너비는 862 픽셀입니다. 나는이 권리를 이해하기를 바랍니다. 내 혼란이 있었던 것은 폭이 의미하는 바였습니다.
수정 사항 : iPad 3는 768 * 포인트 * 크기로 1536 * 픽셀 *을 차지합니다. CSS와 Javascript는 모두 768px (CSS의 논리 단위 인'px'와 물리적 단위 인'pixels')의 차이점을 가지고 있다고 믿습니다. – Cyrille
지금 고정되어있는 괄호 안에있는 것을 제외하고는주의해서 px로 말했습니다. – svachalek