뷰포트 예제

예를 들어 iPhone을 사용하여, 그 자리에없이, 모바일 사파리는 980px에서 페이지를 렌더링하고 확대 /축소를 누를 수 있습니다. 위의 메타 태그를 사용하면 너비를 특정 값으로 설정할 수도 있습니다. 예: <메타 id="wixMobileViewport" 이름="뷰포트" 콘텐츠="너비=320, 사용자 확장 가능=아니오">. 마지막으로 CSS를 리팩터링합니다. 이 예제에서는 weather.css에 글꼴, 아이콘, 기본 위치 지정 및 색상과 같은 공통 스타일을 배치했습니다. 그런 다음 작은 화면의 특정 레이아웃은 weather-small.css에 배치되고 큰 화면 스타일은 날씨-large.css에 배치됩니다. 예제 응용 프로그램을 빌드하기 위해 다음 도구 집합을 사용했습니다. 그들 중 일부는 필요한 반면 다른 사람은 당신의 자신의 선택의 도구로 대체 될 수 있습니다. 예를 들어, 최상층 div에서 너비를 100% 설정하면 뷰포트의 너비에 걸쳐 있고 뷰포트에 대해 너무 크거나 너무 작지 않습니다. Div 적합, 그것은 320 px 넓은 아이폰 의 경우, 342 px 넓은 블랙 베리 Z10, 또는 360 px 넓은 넥서스 5.

뷰포트 메타 설정의 유용한 예와 지금까지 발생하고 필요한 정보의 모든 유용한 예입니다. 화면 크기에 따라 숨길 콘텐츠를 선택하거나 표시할 때주의해야 합니다. 단순히 화면에 맞지 않는다고 해서 콘텐츠를 숨기지 마세요. 화면 크기는 사용자가 원하는 것을 명확히 나타내는 것은 아닙니다. 예를 들어, 일기 예보에서 꽃가루 수를 제거하는 것은 외부로 나갈 수 있는지 여부를 결정하기 위해 정보가 필요한 봄 철 알레르기 환자에게 심각한 문제가 될 수 있습니다. 개인적으로, 나는 사용자가 원하는 경우 확대 /축소 할 수 없게되면서 팬이 아닙니다 (예를 들어, 아름다운 .8em 글꼴은 완벽한 비전을 가지고 있지만 모든 사람이그렇지 않은 경우 좋을 수 있습니다). 그러나 요구 사항이 다르므로 전화가 필요합니다. 모바일 페이지(http://m.example.com/page-1)에서 필요한 항을 사용해야 합니다. CSS 픽셀의 화면 크기와 너비는 장치(예: 휴대폰과 태블릿, 심지어 다른 휴대폰 간)마다 크게 다르기 때문에 콘텐츠가 잘 렌더링되기 위해 특정 뷰포트 너비에 의존해서는 안 됩니다. 최소 및 최대 배율을 설정할 수도 있습니다. 최소는 사용자가 너무 멀리 확대하는 것을 방지하고 최대값은 너무 멀리 확대하는 것을 방지합니다.

다음은 초기 눈금과 함께 최소한 예입니다: 최근 몇 년 동안 화면 해상도는 개별 픽셀이 사람의 눈과 구별하기 어려운 크기로 증가했습니다. 예를 들어, 최근 스마트폰에는 일반적으로 해상도가 1920~1080픽셀(~400dpi)인 5인치 화면이 있습니다. 따라서 많은 브라우저에서 각 CSS “픽셀”에 대해 여러 하드웨어 픽셀을 변환하여 페이지를 더 작은 물리적 크기로 표시할 수 있습니다. 처음에 이 로 인해 많은 터치 에 최적화 된 웹 사이트에 유용성 및 가독성 문제가 발생 했습니다. 피터 폴 코흐는 픽셀이 아닌 픽셀에서이 문제에 대해 썼다.

Sorry, comments are closed for this post.